/*
*** Website Style Diagram. You can use this diagram to quicly find what section
*** and element you want to change.
*** 
***-------------------------------------------------------------------------------------
***H|#top-left                                |#top-right                             |H
***E|---------------------------------------------------------------------------------|E
***A|#header                                                                          |A
***D|                                                                                 |D
***E|---------------------------------------------------------------------------------|E
***R|#upper-menu-bar                                                                  |R
*** ------------------------------------------------------------------------------------
*** |#billboard                                                                       |
*** |                                                                                 |
*** |                                                                                 |
*** ------------------------------------------------------------------------------------
*** |#mid-menu-bar                                                                    |
*** ------------------------------------------------------------------------------------
***U|#upper-teaser-a    |#upper-teaser-b    |T|#upper-teaser-c    |#upper-teaser-d    |B
***P|                   |                   |E|                   |                   |O
***P|                   |                   |A|                   |                   |X
***E|                   |                   |S|                   |                   |E
***R|                   |                   |E|                   |                   |S
*** |                   |                   |R|                   |                   |
***-------------------------------------------------------------------------------------
*** |#lower-menu-bar                                                                  |
***-------------------------------------------------------------------------------------
*** |#breadcrumb                                                                      |
/*
***
***Beginning of the Header Section.
***
*/
#top-table{
	width: 100%;
	height: 160px;
	background-image: url('../images/header-bg.png');
	background-repeat: repeat-x;
}
#top-left{
	padding-left: 40px;
	vertical-align: top;
	text-align: left;
}
#top-right{
	padding-right: 60px;
	text-align: right;
	float: right;
}
#header{

}
#upper-menu-bar{
	height: 33px;
	text-align: center;
	background-color:  #07243d; 
}
#billboard{
        
	background-image: url(../images/teaser-bg.png);
	background-repeat: repeat-x;
}
#mid-menu-bar{
	background-color:  #07243d; 
}
/*
***Beginning of the Upper Teaser Boxes Section
*/
#upper-teaser-boxes{
	width: 100%;
	height: 100%;	
	text-align: center;
}
#u-teaser-a{
	width: 33%;
	height: 100%;
	text-align: center;
}
#u-teaser-b{
	width: 33%;
	height: 100%;
	text-align: center;
}
#u-teaser-c{
	width: 33%;
	height: 100%;
	text-align: center;
}
/*
***Beginning of the Breadcrumb Section
*/
#breadcrumb{
	padding-left: 10px;
	line-height: 1.2em;
/*Edit the breadcrumb background here.*/
	text-align: left;
	background-color: #fff;
	border-top: 10px solid #07243d; 
}
#breadcrumb .pathway{
/*Edit the breadcrumb text here.*/
	color:  #07243d; 
	font-size: 10px;
}
#breadcrumb .pathway a:hover{
	color:  #07243d; 
}
#lower-menu-bar{
	height: 100%;
	text-align: center;
}
/*end of the header area*/

/* 
***
***Beginning of the Main Content Section 
***
*/
#main-body-wrapper{
  width: 100%;
  background-image: url(../images/content-bg.png);
  background-repeat: repeat-x;
  background-color: #fff;
}
#main-body{
/*This is where you can edit the whole content area. */
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}
#left-modules{
	width: 250px;
	padding: 0px;
	vertical-align: top;
	background: transparent;
}
#right-modules{
	width: 200px;
	padding: 20px;
	vertical-align: top;
	background: #07243d; 
}
#center-content{/*the content between the left and right modules*/	
	padding-right: 20px;
	vertical-align: top;
}
#main-content{/*the content area that excludes the content teaser boxes */
	padding-bottom: 10px;
	width: 100%;
	height: 100%;
	vertical-align: top;

}
.upper-content-boxes{
	width: 100%;
	padding: 0px;
	float: left;
	vertical-align: top;
	border: 1px solid red;
}
#content-a{
	width: 50%;
	float: left;
	border: 1px solid #07243d; 
}
#content-a-alone{
	width:100%;
}
.lower-content-boxes{
	width: 100%;
	padding: 0px;
	float: left;
	vertical-align: top;
	border: 1px solid  #07243d; 
}
#content-b{
	width: 50%;
	text-align: center;
	float: left;
}
#content-b-alone{
	width: 100%;
}
#content-b-alone .mod-middle-center{
  padding: 10px 0px 0px 10px;  
}
#content-c{
	width: 50%;
	text-align: center;
	float: left;
}
#content-c-alone{
	width: 100%;
	text-align: center;
}
#content-d{
	width: 50%;
	text-align: center;
	float: right;
}
#content-d-alone{
	width: 100%;
	text-align: center;
}
/*end of main content section*/

/* 
*** 
***Beginning of the Lower Teaser Boxes Section
***
*/  
#lower-teaser-boxes{
	width: 100%;
	height: 100%;
}
#l-teaser-a{
	vertical-align: top;
	text-align: center;
}
#l-teaser-b{
	vertical-align: top;
	text-align: center;
}
#l-teaser-c{
	vertical-align: top;
	text-align: center;
}
#l-teaser-d{
	vertical-align: top;
	text-align: center;
}
/*end of lower teaser boxes section*/

/* 
*** 
***Beginning of the Footer Teaser Boxes Section
***
*/  
#footer-teaser-wrap{
	width: 100%;
	height: 100%;
}
#footer-teaser-boxes{
	height: 40px;
	width: 880px;/*744px or 960px for a fixed width layout and 100% for a fluid layout */
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 75%;
	font-weight: bold;
	background-color:  #07243d; 
	background-image: url(../images/footer-bar.png);
	background-repeat: no-repeat;
}
#f-teaser-a{
	vertical-align: middle;
	text-align: left;
}
#f-teaser-b{
	vertical-align: middle;
	text-align: left;
}
#f-teaser-c{
	vertical-align: middle;
	text-align: left;
}
#f-teaser-d{
	vertical-align: middle;
	text-align: left;
}
/*end of lower teaser boxes section*/

/* 
***
***Beginning of the Footer Section
***
*/
#footer{
	width: 960px;/*744px or 960px for a fixed width layout and 100% for a fluid layout */
	margin-left: auto;
	margin-right: auto;
	padding-top: 7px;
	height: 23px;
	text-align: center;
	font-size: 80%;
	background-image: url(../images/footer-bg.png);
	background-repeat: repeat-x;
}
/*end of the footer section*/