/* MiPlanWeb.com styles */

* {
	margin: 0;
	padding: 0;
}

body
{
    font-family: "Trebuchet MS", Arial;
    color: #000066; 
    /*	line-height: 1.25; */
    /*background-color: #11B50D;*/
    /*background-color: #db6200;*/
    /*background-color: #EC7428; */
    /*background-color: #9ADBE1;*/
    background: url(images/BorderBackground3.jpg) repeat;
    text-align: center;
    font-size: 14px;
}

a
{
    font-weight: bold;
}


a:link, a:visited
{
	/*color: #006699;*/
    color: #db6200;
}
a:hover
{
	text-decoration: none; 
	/*color: #353EDC;*/
	color: #006699;
}
a:active
{
   color: #db6200;
}



/* overrides decoration from previous rule for hovered links */

h1, h2, h3 {
	/*font-family: Georgia, "Times New Roman", Times, serif;*/
	font-family: "Trebuchet MS", Arial;
	margin: 0px;
	padding: 0px;
	font-weight: bold;  
}

h1{
	font-size: 22px;
	color: #006699;
	padding: 15px 0px 15px 50px;  
	background: url(images/Clover-h1-trans.png) no-repeat left; 
}

h2{
	font-size: 17px;
	color: #006699;
	padding: 10px 0px 15px 30px;   
	background: url(images/Clover-h2-trans.png) no-repeat left; 
}


/* Main Divs: Border & Container */
#mainBorder{
	/*width: 986px;*/
	width: 906px;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
	/*border: solid 1px black;*/
}

#mainContainer{
	text-align: left;
	/*border-color: #00552B;*/
	/*border-color: #1D45B4;*/
	border-color:#153486;
	border-width: 2px 2px 2px 2px;
	border-style: solid;
	/*width: 980px;*/
	width: 900px;
	background-color: #FFFFFF;
	background-image: url(images/background1.jpg);
    background-repeat: no-repeat;	
    background-attachment: fixed;   /* Cool effect */
    background-position: right top; /* Cool effect */
}

#header{
	margin: 0;
	padding: 3px 0px 0px 0px;
	/*	border-bottom: 1px solid #006699; */
	width: 100%;
	/*background-color: #FFFFFF;*/

}


#headerLeft{
	width:35%;
	float: left;
	font-size: 70%;
	margin-left: 4px;
	padding-bottom: 2px;
}


#headerRight{
	float: right;
/*	width:35%; */

}


/* NAVIGATION MENU */
#mainNav{
	clear: both;
	color: #FFFFFF;
	padding: 0px 0px 0px 10px;
	/*text-align: center;*/
	
	background-image: url(images/MenuBk.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    /*height: 25px;*/
    
    /* Hack Needed for IE for the "bigger hover button" effect */
    border-left: solid 1px #153486; 
}

#mainNav ul
{
	margin: 0;
	list-style: none;
}
#mainNav li
{
	display: inline;
	background: none;
	line-height:25px;
}
#mainNav li a
{
	color: #FFFFFF;  
	font-weight: bold;  
	font-size: 13px;
	text-decoration: none;
	padding: 7px 10px 7px 10px;
	border-left: 1px solid #c7feff;
	margin: 0px -5px 0px 0px; 
}
#mainNav li a:hover
{
	/*background-color: #db6200;*/
	color: White;
	font-family: Georgia;
	background-image: url(images/SubmenuHoveredBkOrange2.jpg);
    background-repeat: no-repeat;
    background-position: top right;
}
#mainNav li a:active
{
    background-image: url(images/SubmenuHoveredBkGreen.jpg);
    background-repeat: no-repeat;
    background-position: top right;
}
#mainNav .active a /* Works only with Modx */
{
	background-color: White;
	color: #151F5D;
}
#mainNav li.last a 
{
    border-right: 1px solid #c7feff;
}


/* DROPDOWN MENU ITEMS */
.subMenuDiv{
	margin: 0px;
	background-color: White; /* IE hack */
	z-index: 1000;
	position: absolute;
	visibility: hidden;
	border: 1px solid #153486;
	border: 1px solid #c7feff;
	font-size: 13px; 
	 /*border: solid 1px black;*/

}
.subMenuDiv ul
{
     background-image: url(images/SubmenuBkBlue.jpg);
     background-repeat: no-repeat;
     background-position: bottom right;  
}
.subMenuDiv li
{
    list-style: none;
    border-bottom: solid 1px white; /* IE Hack */
    line-height: 30px;
}

.subMenuDiv a
{
    display: block;
    text-decoration: none; 
    padding-left: 5px;
    padding-right: 5px; 
    color: White; 
}
.subMenuDiv a:hover
{
	background-image: url(images/SubmenuHoveredBkOrange2.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    color: White; /* IE6 necessary */ 
}
.subMenuDiv a:active
{
	background-image: url(images/SubmenuHoveredBkGreen.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    color: White; /* IE6 necessary */ 
}
.subMenuDiv a:visited /* Only necessary for IE */ 
{
   color: White; /* IE6 necessary */ 
}

/* END DROPDOWN MENU ITEMS */

/* END NAVIGATION MENU */

#midWrapper
{
    width: 900px;
    overflow: hidden;
    /* This background was cool, but was removed because it collides with
       the other background located at top */
    /*background: url(images/PreFooterBackground5.jpg) no-repeat bottom;*/
    
    /*border: solid 2px black;*/
}


#content
{
	float: left;
    text-align: justify;
	width: 632px;
    overflow: hidden;
    padding: 15px 10px 10px 15px;
    line-height: 23px; 
    /*border: solid 1px black;*/
}

#content a{
	font-size:16px;
}
#content p
{
    padding-bottom: 10px;
}
#content ul li{
	background: url(images/Ball-ul-trans.png) no-repeat top left; 
	padding: 0px 0px 0px 37px;
	list-style: none;
}
#content img
{
    padding: 0px 4px 0px 4px;
}
#content a img
{
    border: none;
}

#sidebar
{
    width: 190px;
    height: auto;
    float: right;
    padding: 5px 10px 10px 10px;
    margin-right: 13px;
    margin-top: 15px;
    font-size: 11px;
    overflow: hidden; /*border-style: groove;*/
    /*border: 1px solid black;*/
}

/* Special fonts */
.bigOffer
{
    font-size: 22px;
    line-height: 30px;
}
.bigOfferAltColor
{
    color: #db6200;
}
/* END Special fonts */

/* Divs inside the main content */
.leftDiv
{
    float: left;
     width: 340px;
    /*border: solid 1px black;*/
}
.rightDiv
{
    float: right;
    width: 280px;
    /*border: solid 1px black;*/
}
/* END Divs inside the main content */


/* Table styles */
.tables
{
    border-collapse: collapse;
    /*line-height: 15px;*/
}
.tableHeading /* the text that appears before the table  */
{
    font-size: 19px;    
    color: #006699;
    text-align: center; 
    padding-bottom: 5px;
}
.tableCell
{
	/*font-size:smaller;*/
	border: solid 1px  #1D45B4;
	padding: 1px 3px 1px 3px;
}	
.tableHeader  /* The first row */
{
	font-weight: bold;
	background-color: #5DF552;
	/*background-color: #C7FFFF;*/
	font-size: 18px;
	text-align: center;
}
.tableFirstColumn
{
    font-weight: bold;
    text-align: right;
}
.tableContent
{
    text-align: center;
}
.tableBoldContent
{
    text-align: center;
    font-weight: bold; 
}
.tableSmallContent
{
    text-align: center;
    font-size: 11px;
}
.tableDoubleLine
{
    line-height: 15px;
}
/* END table styles */

.keywords {
	font-size: xx-small;
	font-family: Arial, Helvetica, sans-serif;
}



/* ACCORDION */
/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves.
 *
 * If you want to constrain the width of the Accordion widget, set a width on
 * the Accordion container. By default, our accordion expands horizontally to fill
 * up available space.
 *
 * The name of the class ("Accordion") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * Accordion container.
 */
.Accordion
{
    /*border-left: solid 3px #56A1A6;
	border-right: solid 3px #56A1A6;*/
    border-left: solid 3px #196098;
    border-right: solid 3px #196098;
    border-top: solid 0px #153486;
    border-bottom: solid 0px #153486;
    overflow: hidden;
    border-style: solid;
}

/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 */
.AccordionPanelTab   /* Works for closed tabs */
{   
	/*background-color: #CCCCCC;
	background-color: #db6200;*/
	/*border-top: solid 2px #1D45B4;
	border-bottom: solid 2px #1D45B4;*/
	margin: 0px;
	padding: 0px 4px 0px 4px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	color: white;
    font-weight: bold;
    font-size: 13px; 	
    text-align: center;
    text-decoration: underline; 
    background-image: url(images/AccordionTabBkGreen.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    height: 25px;
}

/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
 * Content container.
 *
 * The name of the class ("AccordionPanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel content container.
 */
.AccordionPanelContent {
	overflow: auto;
	margin: 1px 4px 0px 4px;
	padding: 0px;
	height: 278px;
	font-size: 12px;
	line-height: 17px;
}

#content .AccordionPanelContent a
{
    font-size: 12px;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab {
	/*background-color: #EEEEEE;*/
	/*background-color: #1D45B4;*/
	background-image: url(images/AccordionTabBkOrange.jpg);
    background-repeat: no-repeat;
    background-position: top right;
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover {
	/*color: #555555;*/
	background-image: url(images/AccordionTabBkOrange.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    /* text-decoration: none;*/
}
.AccordionPanelOpen .AccordionPanelTabHover {
	/*color: #555555;*/
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */
.AccordionFocused .AccordionPanelTab {
	/*background-color: #3399FF;*/
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	/*background-color: #33CCFF;*/
	/*background-color: #1D45B4;*/
}
/* END ACCORDION */


/* Footer */
#footer
{
    clear: both;
    /*height: 67px;*/
    height: 39px;
	font-size: 13px;
	color: White;
	padding: 15px 20px 10px 20px;
	background: url(images/FooterBackgroundSingle2.jpg) no-repeat;
	text-align: center;
    overflow: hidden;
    /*border: solid 1px black;*/
}
#footer a
{
    color: #C7FFFF;
    font-weight: normal;
}
#footer a:hover
{
    color: #43EC3A;
}