﻿/* DEFAULTS
----------------------------------------------------------*/

body   
{
    background: #fff;
    font-size: 80%;
    font-family: Arial, Verdana, Helvetica, sans-serif; /* We are using this font because IE 8 has problem with other fonts for FrozenColumn function, orginal:Arial, Verdana, Helvetica, sans-serif */
    margin: 0px;
    padding: 0px 10px;
    color: #333;
}






p
{
    margin-top: 1em;
    margin-bottom: .85em;
    line-height: 1.1em;
}

input[type=button]
{
    color: #666;    
}

input[type=text],input[type=password]
{
    border: 1px solid #999;    
}

.logintext
{
    width:200px;
}

.disabled, .disabled table tr td input
{
	border: 1px solid #999;
	background: #EEEEEE !important;
}

h1, h2, h3, h4, h5, h6
{
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    color: #8C8C8C;
    padding-bottom: 0px;
    margin-bottom: 0px;
    font-weight: normal;
}

h2
{
    margin-top: 0px;
    font-size: 1.2em;
    font-weight: 600;
   
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.2em;
    font-weight: 700;
    /*color: #8C8C8C;*/
}

h5, h6
{
    font-size: 1em;
}

label
{
    font-weight: bold; 
}

legend
{ 
    color: #8C8C8C;    
    font-size: 1.1em; 
    font-weight: bold;    
}

p, a, div, span, li
{
    font-size: 1em;    
}

img, a{border:0;}



/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    background-color: #fff;
    margin: 0px auto;
    padding: 0px;
    width: 100%;
    /*max-width: 1244px;*/
}

div.menu
{   
    clear: both;
    padding: 0px 10px;
}

div.fixed
{
    background-color: #fff;
    padding-top: 0px;
    position: relative;
    width: 100%;
    z-index: 99;
}



.footer, .footer .left, .footer .right
{
    height: 36px;    
}


.logo
{
     padding:1em;
    position: relative;
    display: inline-block ;
    width:272px;
    height:69px;
    
}



.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
	
	background: white; 
    width: 100%;
    height: 90px;    
}


.footer
{
    position: relative;
    margin: 0px;
    padding: 0px;
	background: #ccc url(../images/header_bg.gif) repeat-x 0 0;
    width: 100%;
}

.footer .left
{
    float: left;    
    margin: 0px;
    padding-top: 0px;
    background: url(../images/left.gif) no-repeat left top;
}



.footer .right
{
    float: right;  
    margin: 0px;
    padding-top: 0px;
    background: url(../images/right.gif) no-repeat right top;
}


.headerTitle
{
    clear:both;
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding:1em;
    border: none;
    font-size: 1.7em;
    background: transparent;
    vertical-align:top;
   
}

.header .right, .headerTitle
{
     color: #133980;
}


.header h1 .version
{
    color: #b50000;    
}




ul.helpLink
{
    display: inline;
    margin: 0px;
    padding: 0px;
    width: auto;
}

ul.helpLink li
{
    display: inline;
    padding-right:12px; 
    padding-left:10px;
}


ul.helpLink li.last
{
    background: none; 
    padding-right:0;
}


.main
{
    padding: 0px 12px;
    min-height: 520px;
    clear: both;
}

.footer
{
    text-align: center;
}

.copyright
{
    margin: 0px;
    padding: 0px;
    width: auto;  
    padding-right:11px; 
    padding-left:4px;
}

div.container
{
    padding: 10px 25px 10px 20px;    
}

.required
{
    color: #ff0000;  
    font-weight: bold;  
    font-size: 1.2em;
}

/* MID LAYER PADDING */

div.content
{
    margin-top: 0px;
    padding: 0 10px 10px;     
}

div.nav
{
    margin-top: 5px;
    padding: 10px;     
}

/* NAVIGATOR AND CONTENT HEADING 
----------------------------------------------------------*/

div.nav
{
    position: relative;
    width: 100%;
    padding-bottom: 0px;
}

ul.navigator
{
    display: inline;
    margin: 0px;
    padding: 0px;
    width: auto;      
}

ul.navigator li
{
    display: inline;
    background:url(../images/nav_arrow.gif) no-repeat 100% 50%;   
    padding-right:15px; 
    padding-left:4px;  
}

.navseperator
{
    color: #636363;
    font-weight: bold;
}

ul.navigator li.last
{
    background: none;    
}

ul.navigator li.first
{
    padding-left: 0px;    
}

hr.separator
{
    height: 1px;
    color: #CCC;
    width: 100%;   
}

a.navigator{  font-size:.9em; font-weight:normal;}



/* FONT CONTROLLER
----------------------------------------------------------*/

.increaseFont
{
    font-size: 14px;    
}

.decreaseFont
{
    font-size: 11px;
}



/* ------------------------------------------------------

   PAGE 2 STYLE  - Telerik Control Grid Command Box
    
   Description: 
      Customized Command Box area, used by all grid control 

--------------------------------------------------------- */

.commandBox
{
    width: 100%;
    padding: 5px;  
    padding-bottom: 0px;
    border: 0px;  
    border-bottom: 1px solid #CCC;
}

.commandBox .left
{
    text-align: left;
    vertical-align: middle;    
}

.commandBox .right
{
    text-align: right;
    vertical-align: middle;    
}

.commandBox td input
{
    margin-bottom: 5px;    
}

.commandBox td a
{
    padding: auto;
    padding-right: 15px;
}



/*-----------------------------------------------------------
  PAGE 3 STYLE -  Add / Update 
----------------------------------------------------------- */
.nav .notes
{
    float: right;
    padding: 10px;
    padding-right: 20px;  
    margin-top: 30px;
}

.error input, .error select 
{
    border: 1px solid #ff0000;    
    background-color: #f8d8d9;
}

/*
    Pager:
*/
.pager .info
{
    
    display: block;    
    padding: 3px;
    text-align: center;
}

.pager .numPart a,
.pager .numPart a span
{
	padding: 3px;
}

.pager .numPart a
{
	padding-left: 0px;    
}

.pager .pageFirst
{
	margin:0 3px 0 0;
}
.pager .pagePrev
{
	margin:0 3px 0 0;
}
.pager .pageNext
{
	margin:0 0 0 3px;
}
.pager .pageLast
{
	margin:0 0 0 3px;
}

.pager .numPart a:hover,
.pager .numPart a:hover span,
.pager .numPart a.currentPage,
.pager .numPart a.currentPage span
{
	background: no-repeat url('../images/icons/sprite.gif');
}

.pager .numPart a:hover
{
	background-position:100% -1250px;
}

.pager .numPart a:hover span
{
	background-position:0 -1150px;
}

.pager .numPart a.currentPage,
.pager .numPart a.currentPage:hover
{
	background-position:100% -1450px;
}

.pager .numPart a.currentPage span,
.pager .numPart a.currentPage:hover span
{
	background-position:0 -1350px;
}

/*                  REUSABLE COMPONENTS  
----------------------------------------------------------*/

div.clear
{
    clear: both !important;
    margin:0px;
    padding:0px;
}


.block
{
    display: block;    
}

.blue
{
    color: #3a5e92;    
}

.bold
{
    font-weight: bold;
}

.red, .failureNotification
{
    color: #cc0000;    
}

.newRow
{
    clear: both;
    width: 100%;  
    position:relative;  
   
}

.newRow2
{
    clear: both;
    width: 100%;    
    position:relative;  
    top:6px;
   
}

.column
{
    display: block;
   
    margin-right: 10px;
    float: left;       
}


.col_5, .col_10, .col_15, .col_20, .col_25, .col_30, .col_33, .col_35, .col_40, .col_45,.col_49,.col_50, .col_55, .col_60, .col_65, .col_70, .col_75, .col_80, .col_85, .col_85, .col_90, .col_95, .col_100 {
	padding:0px; margin:0px;
	float:left;
	overflow:hidden;
	position:relative;
}
.col_5 {width:5% !important;}
.col_10 {width:10% !important;}
.col_15 {width:15% !important;}
.col_20 {width:20% !important;}
.col_25 {width:25% !important;}
.col_30 {width:30% !important;}
.col_33 {width:33% !important;}
.col_35 {width:35% !important;}
.col_40 {width:40% !important;}
.col_45 {width:45% !important;}
.col_47 {width:47% !important;}
.col_49 {width:49% !important;}
.col_50 {width:50% !important;}
.col_55 {width:55% !important;}
.col_60 {width:60% !important;}
.col_65 {width:65% !important;}
.col_70 {width:70% !important;}
.col_75 {width:75% !important;}
.col_80 {width:80% !important;}
.col_85 {width:85% !important;}
.col_90 {width:90% !important;}
.col_95 {width:95% !important;}
.col_97 {width:97% !important;}
.col_100 { width:100% !important;clear:both !important;}

.width_20, .width_40, .width_60, .width_80, .width_100, 
.width_110, .width_120, .width_130, .width_140, .width_150, .width_160, 
.width_200, .width_250, .width_300, .width_350, .width_400, .width_450, .width_500, .width_550, .width_600, .width_650, .width_700
{
	padding:0px; margin:0px;
	float:left;
	overflow:hidden;
}

.width_20 {width:20px !important;}
.width_40 {width:40px !important;}
.width_60 {width:60px !important;}
.width_80 {width:80px !important;}
.width_100 {width:100px !important;}
.width_110 {width:110px !important;}
.width_120 {width:120px !important;}
.width_130 {width:130px !important;}
.width_140 {width:140px !important;}
.width_150 {width:150px !important;}
.width_160 {width:160px !important;}
.width_200 {width:200px !important;}
.width_250 {width:250px !important;}
.width_300 {width:300px !important;}
.width_350 {width:350px !important;}
.width_400 {width:400px !important;}
.width_450 {width:450px !important;}
.width_500 {width:500px !important;}
.width_550 {width:550px !important;}
.width_600 {width:600px !important;}
.width_650 {width:650px !important;}
.width_700 {width:700px !important;}

div.scroll {overflow:scroll;}
div.scrollauto {overflow:auto;}

.padding0
{
    padding: 0px !important;    
}
.padding5
{
    padding: 5px !important;     
}
.padding10
{
    padding: 10px !important;    
}

.margin0
{
    margin:0px !important;
}
.margin5
{
    margin:5px !important;
}
.margin10
{
    margin:10px !important;
}
.marginp1
{
    margin:1% !important;
}
.marginp2
{
    margin:2% !important;
}
.marginp3
{
    margin:3% !important;
}

.marginbottom_10
{
    margin-bottom: 10px !important;
}

.margintop_4
{
    margin-top: 4px !important;
}

.margintop_10
{
    margin-top: 10px !important;
}

.right10
{
    margin-right: 10px;
}
.inline
{
    display: inline-block;    
    display:-moz-inline-box;
    position:relative ;
}

.left, .leftmenu
{
    float: left;    
}

.right
{
    float: right;    
}

img.buttonIcon
{
    vertical-align: middle;    
    border: 0px;
    margin-right: 2px;
}

.tooltip
{
	font-size: 0.9em;
    background: #ffffcc;
    padding: 2px 2px;
    border: 1px solid black;
    white-space:nowrap;
}

/* Validation error message styles */

.warningMessage
{
   background: url(../images/icons/error.png) no-repeat 0 0%;    
   display: inline-block;    
   display:-moz-inline-box;
   height: 20px;
   width: 20px;

}

#tooltip {
    padding: 5px 10px;
    background: #f8d8d9;
    border: none;
}



/*
    -------------------------------------------------
    Telerik grid edit form
    -------------------------------------------------
*/

.EditForm
{
    padding: 0px;
    margin:  0px;     
    width: 100%; 
}

.EditFormTable
{
    background-color: #dcebf2;  
    width: 100%;
    padding: 2px;
}

.EditFormTable input, .EditFormTable select
{
    border: 1px solid #999;
}

/* MessageBox */
.invisible
{
    display:none !important;
}

 
.messageBox, .messageBoxSmall 
{
    background-color:#F9F9F9;
    border: 1px solid #ccc;
    display: block;
    font-size: 0.9em;
    font-weight: bold; 
    min-height: 40px;
    color: #2030FF;
    margin-bottom: 10px;
    padding: 5px;
}
 
div.messageBoxTitle
{
   margin: 6px 10px 10px 60px;
   font-size: 1.25em;
}
 
 
 
 
/*** title only small message box ***/
.messageBoxSmall 
{
    margin-left:0;  
    margin-right:0;  
}
 
 
.messageBoxSmallImage
{
    float:left;
    margin:4px;
    border:0;
 
}
 
.messageBoxSmall 
{
    min-height:16px;
}
 
div.messageBoxTitleSmall
{
   margin: 6px 4px 4px 4px;
   font-size: 1.2em;
}
 
.successBoxSmall
{
    color:Green;
}
 
.informationBoxSmall
{
    color: #4876FF;
}
 
.warningBoxSmall
{
    color: #CDAD00;
}
 
.errorBoxSmall
{
    color: #ff0000;
}
 
/********************************/
 
div.messageBoxContents
{
    margin-left: 120px;   
}
 
 
 
 
 
.successBox
{
    background-color:#F9F9F9;
    background: url('../images/icons/32/success.png') no-repeat scroll 15px 5px #F9F9F9;
    color:Green;
    border-color:Green;
}
 
.informationBox
{
    background-color:#F9F9F9;
    background: url('../images/icons/32/information.png') no-repeat scroll 15px 5px #F9F9F9;    
    color: #4876FF;
}
 
.warningBox
{
    background: url('../images/icons/32/warning.png') no-repeat scroll 15px 5px #F9F9F9;    
    color: #CDAD00;
}
 
.errorBox
{
    background: url('../images/icons/32/error.png') no-repeat scroll 15px 5px #F9F9F9;
    color: #ff0000;
}



/********************************/

div.messageBoxContents
{
    margin-left: 120px;   
}




/* Dynamic Loading */
div.pageLoading{
    display:none;
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
    background-color: #555555;    
    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;    
    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
    z-index:1000;
  }

div.pageLoading img
{
    display: block;
    margin: auto;
    margin-top:200px;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

/* Fieldset Style */
fieldset
{
   /* border: 1px solid #A4ABB2;
    border-radius: 4px 4px 4px 4px;
    */
	padding:.5em;
	
}




.border
{
    border: 1px solid #A4ABB2;
    border-radius: 4px 4px 4px 4px;
}

.noBorder{border:0;}

.breadcrumb
{
  
    border-left:80px solid #ffa800;
	position:relative;
}
