body 
{
	margin: 5px 5px 5px 5px;
	padding: 0px;
	font-family:Verdana; 
	font-size: 10pt;
	background: #e8f3fa url(SiteBg.png) bottom repeat-x;
	min-height: 100%;
}

table, p
{
	font-family: Verdana;
	font-size: 10pt;
	line-height: 1.5;
}
.Main
{
	background: #ffffff;
	width: 96%;
	margin: 0px auto;
}
.TopHeader
{
    clear:both;
	background-image: url(HeaderBg.png);
	background-size: cover;
}

A:link {
	COLOR: #2b5591; TEXT-DECORATION: none
}
A:visited {
COLOR: #2b5591; TEXT-DECORATION: none
}
A:hover {
	COLOR: #4169e1; text-decoration:underline
}
.mybutton {
border:1px solid;
}
.HorizontalSeparator
{
	background-image: url(separator.png);
	background-repeat: repeat-y;
}
.NormalTable
{
 border-color: #2B5591;
 border-width: 1px;
 border-collapse: collapse;
 border-style:Solid;
 font-family:Verdana;
 font-size:10pt;
 padding: 3px 3px 3px 3px; 
}
.NormalTextBox
{
 font-family: Verdana;
 font-size:  8pt;
 border: 1px #2B5591 solid;
}
.NormalLinkButton
{
 color:#2B5591;
 font-family:Verdana;
 font-size:8pt;
 font-weight:bold;
}
.BoldLabel
{
 color:#2B5591;
 font-family:Verdana;
 font-size:8pt;
 font-weight:bold;	
}
.NoticeLabel
{
 color: #000000;
 font-family:Verdana;
 font-size:8pt;
 font-weight: bold;	
}
.HeaderLabel
{
 color: #000000;
 font-family:Verdana;
 font-size:8pt;
 font-weight: bold;	
 text-decoration: underline;
}
.NormalText
{
 color:#000000;
 font-family:Verdana;
 font-size:10pt;
}
.WarningText
{
 color: #FF0000;
 font-family:Verdana;
 font-size:8pt;
 font-weight:bold;
}
.ANormalText
{
 color:#812787;
 font-family:Verdana;
 font-size:10pt;
}

.updateprogess
{
  font-family:Verdana, sans-serif;
  color:#424242;
  font-size:0.9em;
}

a.updateprogess
{
/*text-decoration:none;*/
}

div.updateprogess
{
	position: absolute;
	text-align: center;
	border-color: #424242;
    padding-top: 20px;
    padding-bottom:0px;
    border-style: solid;
    border-width: 1px;
    background-color: #FCFCFC;
    width: 300px;
    height: 40px;	
}

.ModuleTitle
{
	background-image: url(titlebg.gif); 
	height: 27px; 
	color: #000000; 
	font-weight: bold; 
	font-family: Verdana; 
	font-size: 8pt;
	text-decoration: underline;
	padding: 3px 0 0 3px;
}   
.PreviewTable
{
	font-size: 9pt;
	width: 100%;
	background-image: url(bgtb1.jpg);
	background-size: cover;
	border: 0px; 
	font-family: Verdana;
}
.Button
{
	padding: 2px 5px 2px 5px;
	border: 1px solid #6E9DCD;
	color: #FFFFFF;
	background: url(ButtonBackground.gif) repeat-x center #6E9DCD;
	font-weight: bold;
	font-size: 9pt;
}
.TextBox {
	margin-bottom: 1px;
	padding: 3px 2px;
	border: 1px solid #DDDDDD;
	background: #FFFFFF;
}
input, select, textarea, .TextBox {
	padding: 1px;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 100%;
}

.LoginBox {
	float:right;
	width:200px;}
.LoginBox .Header {
	margin:0px;
	padding:0px;
	height:24px;
	width:200px;
	background-image:url(Boxes/LoginBox_Header_200x24.gif);
	background-repeat:no-repeat;}
.LoginBox .Middle {
	padding:0px;
	margin:0px;
	font-size:75%;
	background-image:url(Boxes/LoginBox_Middle_200x1.gif);}
	.LoginBoxContent {
	padding:0px 20px 5px 20px;}
.LoginBox .Footer {
	height:38px;
	width:200px;
	background-image:url(Boxes/LoginBox_Bottom_200x38.gif);
	background-repeat:no-repeat;}

.YellowBox_t {background:url(Boxes/YellowBox_dot.gif) 0 0 repeat-x;}
.YellowBox_b {background:url(Boxes/YellowBox_dot.gif) 0 100% repeat-x;}
.YellowBox_l {background:url(Boxes/YellowBox_dot.gif) 0 0 repeat-y;}
.YellowBox_r {background:url(Boxes/YellowBox_dot.gif) 100% 0 repeat-y;}
.YellowBox_br {background:url(Boxes/YellowBox_br.gif) 100% 100% no-repeat;}
.YellowBox_bl {background:url(Boxes/YellowBox_bl.gif) 0 100% no-repeat ;}
.YellowBox_tl {background:url(Boxes/YellowBox_tl.gif) 0 0 no-repeat;}
.YellowBox_tr {background:url(Boxes/YellowBox_tr.gif) 100% 0 no-repeat;padding:20px;vertical-align:middle;}

 /* Remove margins and padding from the list, and add a black background color */
ul.MainMenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #317189;
}

/* Float the list items side by side */
ul.MainMenu li {float: left; white-space: nowrap;}

/* Style the links inside the list items */
ul.MainMenu li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: left;
    padding: 8px 4px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 9pt;
    font-weight: bold;
    vertical-align: middle;
    height: 100%;
    vertical-align: middle;
}

/* Style the links inside the list items */
ul.MainMenu li img {
    vertical-align: middle;
    padding: 0px 0px 0px 8px;
}

/* Change background color of links on hover */
ul.MainMenu li a:hover {background-color: #276A83;}

/* Hide the list item that contains the link that should open and close the MainMenu on small screens */
ul.MainMenu li.icon {display: none;}

 /* When the screen is less than 480 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the MainMenu (li.icon) */
@media screen and (max-width:480px) 
{
  ul.MainMenu li:not(:first-child) {display: none;}
  ul.MainMenu li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the MainMenu with JavaScript when the user clicks on the icon. This class makes the MainMenu look good on small screens */
@media screen and (max-width:480px) {
  ul.MainMenu.responsive {position: relative;}
  ul.MainMenu.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
    
  }
  ul.MainMenu.responsive li {
    float: none;
    display: inline-block;   
    white-space: nowrap;
  }
  ul.MainMenu.responsive li a {
    display: inline-block;   
    white-space: nowrap;
    text-align: left;
  }
}


/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 4.6%;
}
.col:first-child { margin-left: 0; }

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

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 47.7%;
}
.span_1_of_2_Content {
	width: 67.7%;
}
.span_1_of_2_List {
	width: 27.7%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2, 
	.span_1_of_2_Content, .span_1_of_2_List { 
		width: 100%; 
	}
}

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}