body {
    margin:0;
    padding:0;
    border:0;			/* This removes the border around the viewport in old versions of IE */
    width:100%;
    background:#fff;
    min-width:600px;    	/* Minimum width of layout - remove line if not required */
    /* The min-width property does not work in old versions of Internet Explorer */
    font-size:100%;
}
a {
    color:#369;
}
a:hover {
    color:#fff;
    background:#369;
    text-decoration:none;
}
h1, h2, h3 {
    margin:.8em 0 .2em 0;
    padding:0;
}
p {
    margin:.4em 0 .8em 0;
    padding:0;
}
img {
    margin:10px 0 5px;
}
#ads img {
    display:block;
    padding-top:10px;
}

/* Header styles */
#header {
    clear:both;
    float:left;
    width:100%;
}
#header {
    border-bottom:1px solid #000;
    background-color: #22A7F0;/*#0F8A5F;*/
    color: #fff;
}
#header p,
#header h1,
#header h2 {
    padding:.4em 15px 0 15px;
    margin:0;
}

#layoutdims {
    clear:both;
    background:#eee;
    border-top:4px solid #000;
    margin:0;
    padding:6px 15px !important;
    text-align:right;


}
/* column container */
.colmask {
    position:relative;	/* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    width:100%;			/* width of whole page */
    overflow:hidden;		/* This chops off any overhanging divs */
    font-size: 14px;

}
/* common column settings */
.colright,
.colmid,
.colleft {
    float:left;
    width:100%;
    position:relative;
    min-height: 600px;
    /*        //border-color: red;
            //border-width: 2px;  */
    margin: 5px 5px 5px 5px;
    /*        padding: 0px 0px 0px 0px;
            border-style: solid;*/
}
.col1,
.col2,
.col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;


}
.col1 {min-height: 500px; }
/* 2 Column (left menu) settings */
/*.leftmenu {
        background:#fff;		 right column background colour 
        
}
.leftmenu .colleft {
        right:75%;			 right column width 
        background:#f4f4f4;	 left column background colour 
        min-height: 600px;
}
.leftmenu .col1 {
        width:71%;			 right column content width 
        left:102%;			 100% plus left column left padding 
}
.leftmenu .col2 {
        width:21%;			 left column content width (column width minus left and right padding) 
        left:6%;			 (right column left and right padding) plus (left column left padding) 
}*/
/* Footer styles */
#footer {
    clear:both;
    float:left;
    width:100%;
    border-top:1px solid #000;
    height : 100%;
}
#footer p {
    padding:10px;
    margin:0;
/*    background-color: #22A7F0;*/
background-color: #0C8FFF;
}

.midcol {
    float:left;
    width:100%;
    position:relative;
    min-height: 550px;
    margin: 5px 5px 5px 5px;
}

.error {
    background-color:tomato ;
    border-style:solid ;
    color:#000000;
    display:block;
    list-style-type:none;
}

.formerror {
    color:tomato;
    display:block;
    list-style-type:none;
}

.notice {
    background-color:#F2F7B7 ;
    border-style:solid ;
    color:#000000;
    display:block;
    list-style-type:none;
}

/*.cssbutton {
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
        background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
        background-color:#ededed;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #dcdcdc;
        display:inline-block;
        color:#777777;
        font-family:arial;
        font-size:15px;
        font-weight:bold;
        padding:6px 6px;
        text-decoration:none;
        text-shadow:1px 1px 0px #ffffff;
        margin: 2px 2px 2px 2px;
        
}*/
/*     
 }.classname:hover {
     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
     background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
     background-color:#dfdfdf;
 }.classname:active {
     position:relative;
     top:1px;
 }*/

.cssbutton {
    background: #9dadb8;
    background-image: -webkit-linear-gradient(top, #9dadb8, #485963);
    background-image: -moz-linear-gradient(top, #9dadb8, #485963);
    background-image: -ms-linear-gradient(top, #9dadb8, #485963);
    background-image: -o-linear-gradient(top, #9dadb8, #485963);
    background-image: linear-gradient(to bottom, #9dadb8, #485963);
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    cursor: pointer; 
}

.cssbutton:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}

input[readonly] {
    background-color:#dcdcdc;
}
.clearfix{
    clear:both;
}
input[type="submit"] {
    background-color: #666666;
    color: #ffffff;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    padding:6px 24px;
    margin: 2px 2px 2px 2px;
}
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
        url('/images/FhHRx.gif')
        50% 50% 
        no-repeat;
}

/* When the body has the loading class, we turn  url('../img/FhHRx.gif')
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}


.dashboard-innerbox {
    float:left;  padding: 2px 2px 2px 2px; margin: 5px 2px 0px 5px;
    border-radius: 8px 8px 0px 0px; 
    -moz-border-radius: 8px 8px 0px 0px; 
    -webkit-border-radius: 8px 8px 0px 0px; 
    border: 2px solid #800000;
    text-align: center;
    height: 80px;
}

/*rounded box */
.boxshadow 
{
    -moz-box-shadow: 3px 3px 5px #535353;
    -webkit-box-shadow: 3px 3px 5px #535353;       
    box-shadow: 3px 3px 5px #535353;
}
.roundbox
{  
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px;  
    border-radius: 6px 6px 6px 6px;
}
.roundbox-top
{    
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;    
    border-radius: 4px 4px 0 0;
}
.roundbox-bottom
{    
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}
.gridheader, .gridheaderbig, .gridheaderleft, .gridheaderright
{    
    padding: 4px 4px 4px 4px;
    background:  #003399 url(images/vertgradient.png) repeat-x;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    color: khaki;
}
.gridheaderleft
{
    text-align: left;
}
.gridheaderright
{
    text-align: right;
}
.gridheaderbig
{    
    font-size: 135%;
}

#dashboard-topbox { width: 650px; border: solid 2px steelblue;}
#dashboard-bottobbox { background: #dfeffc; height: 100px; }

/* menu */
#header {
    background-color: #000;
}
.menu ul {
    list-style: none;
}

.menu ul, 
ul ul {
    margin: 0;
    padding: 0;

}
#wrapper {  
    width: 220px;
    margin: 100px auto;
    font-size: 0.8125em;

}
.menu {
    width: auto;
    height: auto;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
    background-color: #616975;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
    background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
    border-bottom: 1px solid #33373d;
    -webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
    -moz-box-shadow: inset 0px 1px 0px 0px #878e98;
    box-shadow: inset 0px 1px 0px 0px #878e98;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 0.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);

}
.menu ul li a {
    background: #fff;
    border-bottom: 1px solid #efeff0;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 0.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.923em;
    font-weight: 400;
    color: #000;

}
.menu ul li:last-child a {
    border-bottom: 1px solid #33373d;
}
.menu ul li ul a {
    background:  blue;
    border-bottom: 1px solid #efeff0;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.923em;
    font-weight: 400;
    color: #fff;
}
.menu {
    font-size:12px;
}


#header ul {list-style: none;padding: 0px;margin: 0px;}
#header  ul li {display: block;position: relative;float: left;border:1px solid #000}
#header  li ul {display: none;}
#header  ul li a {display: block;background: #1E2222;padding: 5px 10px 5px 10px;text-decoration: none;
                  white-space: nowrap;color: #fff;}
#header  ul li a:hover {background: #f00;}
#header  li:hover ul {display: block; position: absolute; z-index: 999;}
#header  li:hover li {float: none;}
#header  li:hover a {background: #f00;}
#header  li:hover li a:hover {background: #000;}
#header  #drop-nav li ul li {border-top: 0px;}

.col1 {padding-left:20px; width: 1024px;}

.header-name { background-color :#0c8fff; font-size: 46px;   }


/*table*/
.report-table {
    border-width : 1px;
    border-color : #000;
    width: 99%;
    border-style: solid;
    text-align: center;
}

.report-table tr th {
    background-color:#666666;
    color : #ffffff;
}
.report-table tr:nth-child(even) {background: #d4d4d4 ;}
.report-table tr:nth-child(odd) {background: #FFF}

.form-table {
    border-width : 1px;
    border-color : #000;
    border-style: solid;
}

.form-table tr th {
    background-color:#666666;
    color : #ffffff;
}
.report-header-form {
    width: 99%;
    float: left;
    
}
.report-search-right {
    float: right;
    padding: 5px 5px 5px 5px;
    height: 30px;
}
.report-search-left {
    float: left;
    padding: 5px 5px 5px 5px;
    height: 30px;
}
.report-search-button{
    float: left;
}

/*-------*/
.form-help {
 font-size: 9px;   
 font-style:oblique;
}

legend {
    font-size: 14px;   
    font-style:normal;
    color: #fff;
    background-color: #0C8FFF;
    padding: 2px 2px 2px 2px;
}

/*----------BACK Button--------------*/
#buttonboxback {
    width: 100%;
    height: 40px;
    background-color: darkblue;
    position: relative;
    margin-left: 40px;
    border-radius: 5px;
}

#buttonboxback:before {
    content: "";
    position: absolute;
    top: 0;
    left: -17px;
    border-style: solid;
    border-width: 20px 20px 20px 0;
    border-color: transparent darkblue transparent transparent;
}

#buttonboxback > a {
    display: block;
    text-decoration: none;
    text-align: center;
    color: #fff;
    font: bold 18px/40px Sans-Serif;
}

#buttonboxback:hover {
    background-color: lightblue;
}

#buttonboxback:hover:before {
    border-right-color: lightblue;
}
/*----------BACK Button-END-------------*/

#printer_floatleftbox {
    float: right; 
    display: block; 
    margin: 0 auto; 
    border-style: solid; 
    padding: 0 10px 0 10px; 
    margin: 10px 30px 10px 30px;
}

/*---------------form styling---------------------*/
input[type="text"], textarea, select, input[type="password"],input[type=number] { border:2px solid #DADADA; border-radius:5px; color: black;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px;
/* For Mozilla Web Browser */ 
border: solid 1px grey;
}
input[type=number] {
    text-align: right;
}