html, body
{
    padding:0;
    margin: 0;
}

/* center div with 100% screen width */
.ctr100
{
    right: 0;left: 0;margin-right: auto;margin-left: auto;                
    overflow: auto;min-height: 400px;height: 100%;width: 100%;      
}

/* center div with 90% screen width */
.ctr90
{
    right: 0;left: 0;margin-right: auto;margin-left: auto;                
    overflow: auto;min-height: 400px;height: 100%;width: 90%;      
}

/* center div with 80% screen width */
.ctr80
{
    right: 0;left: 0;margin-right: auto;margin-left: auto;                
    overflow: auto;min-height: 400px;height: 100%;width: 80%;      
}

/* center div with 80% and no height constraint */
.ctr80x
{
    right: 0;left: 0;margin-right: auto;margin-left: auto;                
    overflow: auto;width: 80%;      
}

/* center div with 75% screen width */
.ctr75
{
    right: 0;left: 0;margin-right: auto;margin-left: auto;                
    overflow: auto;min-height: 400px;height: 100%;width: 75%;      
}

/* center div with 60% screen width */
.ctr60
{
    right: 0;left: 0;margin-right: auto;margin-left: auto;                
    overflow: auto;min-height: 400px;height: 100%;width: 60%;      
}

/* colors used predominantly by wmis */

.bgColorAqua { background-color: #E1EDFF; }
.bgColorBlue { background-color: #8CD0F4; }

/* end colors */

.label { margin-left: 5px; text-align:left; font: 12px arial, serif; font-weight:bold; }    /* left align label */                
.clear { clear:both; }          /* clear any floats */
.hidden { display:none; }       /* hide container */
.visible { display:block; }     /* show container */
.bold { font-weight:bold; }     /* bold text */ 
.leftAlign { text-align: left; }     /* left align text */
.rightAlign { text-align: right; }     /* right align text */
.centerAlign { text-align: center; }     /* right align text */
.left_label { margin-left: 5px; text-align:left; float:left; font-weight:bold; }    /* left align label */
.right_label { margin-right: 5px; text-align:right; float:right; font-weight:bold; } /* right align label */
.leftLabel { margin-left: 5px; text-align:left; float:left; display:inline-block; }    /* left align label */
.rightLabel { margin-right: 5px; text-align:right; float:right; display:inline-block; } /* right align label */
.splitter { clear: both; margin-bottom:5px; } /* used to split multiple ares within a section */
.grpHeader {padding: 5px;margin: 0 5px 5px 5px;font-size: 10pt;color: white;background-color: #404ba9;} /* header to be used in responsive layouts */
.tabHeader {margin-bottom:5px;padding:4px;height:18px;background:#404ba9;color:#ffffff;font-size:12px;font-weight:normal;	border:solid 1px black;}
.hideScroll { overflow: hidden;} /* hides the scroll bar */
.showScroll { overflow: auto;} /* shows the scroll bar */
.border { border: #404ba9 1px solid; } /* displays a 1px blue border */
.fixedLayout { table-layout: fixed;} /* For fixed table layouts */

/* margins and pads */
.mar5 { margin:5px; } /* used for general min padding */
.mar10 { margin:10px; } /* used for general max padding */
.pad5 { padding:5px; } /* used for general min padding */
.pad10 { padding:10px; } /* used for general max padding */
.botMar5 { margin-bottom:5px; } /* used for bottom 5px margin */
.topMar5 { margin-top:5px; } /* used for bottom 5px margin */
.botMar10 { margin-bottom:10px; } /* used for bottom 10px margin */
.topMar10 { margin-top:10px; } /* used for bottom 10px margin */
.leftMar5 { margin-left:5px; } /* used for bottom 5px left margin */
.rightMar5 { margin-right:5px; } /* used for bottom 5px right margin */
.noMargin { margin: 0; padding:0; }

/* spans */
.wd10 { width:10%; float:left; display:inline-block; }
.wd15 { width:15%; float:left; display:inline-block; }
.wd20 { width:20%; float:left; display:inline-block; }
.wd25 { width:25%; float:left; display:inline-block; }
.wd30 { width:30%; float:left; display:inline-block; }
.wd40 { width:40%; float:left; display:inline-block; }
.wd50 { width:50%; float:left; display:inline-block; }

/* fonts */
.note { font-size: 10px; } /* used to display small texts */
.arial10 { font: 10px arial, serif; }
.arial11 { font: 11px arial, serif; }
.arial12 { font: 12px arial, serif; }
.font10 { font-size: 10pt; }
.font11 { font-size: 11pt; }
.font12 { font-size: 12pt; }
	
/* Responsive Layout -- calculating all the margin width based on the 1% margin rule */
/*  sections that contain the div two col and three col layout. Also note that 5px bottom margin is to give some neat gap between containers  */
.section {clear: both;padding: 0px;margin: 0px; margin-bottom:5px;}

/*  two col and three col 1% margin columns  */
.col {display: block;float:left;margin: 0.1% 0 0 1%;}    /* Use this for no margin bottom so that all elements are compact */
.col:first-child { margin-left: 0; }
.colSpace {display: block;float:left;margin: 1% 0 1% 1%;} /* Use this for 1% margin bottom so that all elements are free and spacious */
.colSpace:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before, .group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }                  

/* two column varying widths with 1% margin. using minimum naming convention of the format "c{NumOfColumns}{WidthinPercentage}" (default 100/NumOfColumns if only NumOfColumns is used ) */
.c2 {width: 49.5%;}
.c210 {width: 9.5%;}
.c215 {width: 14.5%;}
.c220 {width: 19.5%;}
.c225 {width: 24.5%;}
.c230 {width: 29.5%;}
.c235 {width: 34.5%;}
.c240 {width: 39.5%;}
.c245 {width: 44.5%;}
.c255 {width: 54.5%;}
.c260 {width: 59.5%;}
.c265 {width: 64.5%;}
.c270 {width: 69.5%;}
.c275 {width: 74.5%;}
.c280 {width: 79.5%;}
.c285 {width: 84.5%;}

/* three column varying widths with 1% margin. using minimum naming convention of the format "c{NumOfColumns}{WidthinPercentage}" (default 100/NumOfColumns if only NumOfColumns is used ) */
.c3 {width: 32.66%;}
.c310 {width: 9%;};
.c315 {width: 14%;}	
.c320 {width: 19%;}
.c330 {width: 29%;}
.c335 {width: 34%;}
.c340 {width: 39%;}
.c345 {width: 44%;}
.c350 {width: 49%;}	
.c360 {width: 58%;}

/* any size less than 480 pixels, use full width */
@media only screen and (max-width: 480px) {
	.col {  margin: 0.1% 0 1% 0%; }
	.c2, .c210, .c215, .c220, .c225, .c230, .c235, .c240, .c245, .c255, .c260, .c265, .c270, .c275, .c280, .c285, .c3, .c310, .c315, .c320, .c330, .c335, .c340,  .c345, .c350, .c360 { width:100% } 
	.leftLabel, .rightLabel { float:none; } /* clear the floats of the labels for responsive layout */
}