/* 

Summary:

Left Column Width: 511 pixels
Right Column Width: 180 pixels 
Motamedia Green: #4FAD26

*/

* {
margin: 0;
padding: 0;
}

html, body {
margin: 0;
padding: 0;
text-align: center;
height: 100%;
width: 100%;
background: #F1F1F1 url('../images/body-bg.jpg') repeat-y top center;
font-family: Verdana, Helvetica, Arial, Sans Serif;
}

#container {
position: relative;
margin: 0 auto 50px; /* 50px is for the footer */
width: 760px;
text-align: left;
min-height: 100%;
background: #FFF;
}

* html #container { /* This is for IE6 */
height: 100%;
}

/* ================== HEADER ================== */

#header-banner {
position: relative;
top: 0;
left: 0;
width: 760px;
height: 153px;
background: url('../images/header-bg.jpg') no-repeat;
clear: both;
}

/* ================== TOP NAV ================== */

#top-nav {
position: relative;
width: 760px;
height: 37px;
background: url('../images/top-nav-bg.gif') repeat-x;
clear: both;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
z-index: 999;
}

#top-nav div {
margin-left: 26px;
margin-right: 26px;
width: 708px;
}

#top-nav ul li.divider {
margin-left: 5px;
margin-right: 5px;
font-weight: normal;
color: #5FDA55;
}


#top-nav ul {
	padding:0;
	margin:0;
	border:0;
	list-style-type:none;
	line-height: 26px;

}                       

#top-nav li {

	float:left;    /* Side-by-side array */
	position: relative;
	margin: 0;

}

#top-nav ul li table { /* This table makes dropdowns work in IE */
	margin:-1px 0;              /* IE5 needs -1px top and bottom table margins */
	m\argin: 0;               /* re-zero the table margins for everyone but IE5 */
	border-collapse: collapse;      /* IE5 needs this for the sub-menus to work */
	font-size:11px; /* this sets the base font size for our entire menu */
}


/* ================== TOP LEVEL NAV DEFINITIONS ================== */

#top-nav ul li ul { /* HIDE THE DROP DOWN LIST */
display: none; 
}

#top-nav ul li a,
#top-nav ul li a:visited { /* DEFAULT STATE FOR TOP-LEVEL LINKS */
display: block;          
float: left;
text-decoration: none;
color: #FFF;
padding-bottom: 3px; /* Some padding so the dropdown doesn't disappear on rollover */

}

#top-nav ul li:hover a,
#top-nav ul li a:hover {  /* 'OVER' STATE FOR TOP-LEVEL LINKS */                       
text-decoration: underline; /* MUST HAVE A HEIGHT HERE OR NO DROPDOWN! */
height: auto;
}

/* ================== 2ND LEVEL MENU DEFINITIONS ================== */

#top-nav ul li:hover ul,
#top-nav ul li a:hover ul { /* This is the dropdown box */                         
	display: block;
	position: absolute;
	margin: 0;
	top: 26px;             
	left: -9px;      
	height: auto;     
	text-decoration: none;
	padding-bottom: 3px;
}

#top-nav ul li:hover ul li a.light-green,
#top-nav ul li a:hover ul li a.light-green {                  

	border:0;
	margin:0;
	height:auto;
	color:#FFF;  
	background: #4DAC25;           
	padding-left: 9px;
	padding-right: 4px;
	text-decoration: none;
	width: 20em;
}

#top-nav ul li:hover ul li:hover a,
#top-nav ul li a:hover ul li a:hover {                /* 2nd level selected item */
	text-decoration: none;
 	background: #209318;
}



/* ================== CONTENT ================== */

#content-wrapper {
position: relative;
top: 17px;
left: 27px;
width: 714px;
margin: 0;
float: left;
clear: both;
padding-bottom: 35px; /* Clear space before site footer */ 
}

/* ================== LEFT COLUMN ================== */

#left-column {
width: 511px;
float: left;
margin: 0;
padding: 0;
}

#text-column {
width: 340px;
padding: 0;
margin: 0; 
float: right;
}


/* ================== RIGHT COLUMN ================== */

#right-column {
width: 180px;
float: right;
margin: 0;
padding: 0;
}

/* ================== FOOTER ================== */

#footer {
position: relative;
margin: -50px auto 0; /* -50px is for the footer */
padding: 0;
clear: both;
width: 760px;
height: 50px;
background: #fff url('../images/footer-bg.gif') repeat-x top left;
z-index: 999;
}

#footer div {
position: relative;
top: 12px;
left: 26px;
color: #777;
font-size: 10px;
text-align: left;
line-height: 16px;
height: auto;
margin-bottom: 10px;
}

/* ================== NEWS ================== */

#news-block-container {
width: 180px;
float: left;
background: url('../images/news-bg-middle.gif') repeat-y;
margin: 0;
padding: 0;
clear: both;
margin-bottom: 10px;
}

#news-block-header {
width: 180px;
float: left;
background: url('../images/news-bg-top.gif') left top no-repeat;
}

#news-block-footer {
width: 180px;
height: 26px;
background: url('../images/news-bg-bottom.gif') left bottom no-repeat;
float: left;
}

#news-items-container { /* Position elements inside news block container */
padding-left: 9px;
padding-top: 7px;
width: 156px;
float: left;
}

.news-image {
margin-top: 5px;
margin-bottom: 7px;
width: 154px;
float: left;
clear: both;
}

#news-block-container img {
border: 1px solid #ccc;
float: left;
clear: both;
} 

#news-block-container ul {
list-style-type: none;
float: left;
clear: both;
width: 100%;
margin: 0;
padding: 0;
}

.news-item {
float: left;
clear: both;
width: 100%;
}

li.news-item + li.news-item {
margin-top: 9px;
}

* html .news-item { /* IE 6 doesn't support adjacent selectors */
margin-bottom: 10px;
}

.news-date {
font-size: 11px;
line-height: 17px;
padding-left: 21px;
background:  url('../images/chevron-small.gif') 0 5px no-repeat;
float: left;
color: #4FAD26;
font-weight: bold;
clear: both;
width: 100%;
margin-bottom: 6px;
}

.news-title {
color: #333;
font-size: 10px;
line-height: 14px;
font-weight: bold;
clear: both;
float: left;
width: 100%;
margin-bottom: 6px;
}

.news-copy {
color: #333;
font-size: 10px;
line-height: 14px;
float: left;
width: 100%;
clear: both;
}

#news-block-container p.news-copy + p.news-copy {
margin-top: 10px;
}


* html .news-copy { /* IE6 Workaround for adjacent selectors... which rule */
margin-bottom: 10px;
}

#news-block-container p.news-title a { color: #333; text-decoration: none; }
#news-block-container p.news-title a:link { color: #333; text-decoration: none; }
#news-block-container p.news-title a:visited { color: #333; text-decoration: none; }
#news-block-container p.news-title a:hover { color: #333; text-decoration: underline; }


/* ================== RIGHT SIDEBAR BUTTONS ================== */

.sidebar-button {
display: block;
width: 180px;
height: 104px;
float: left;
padding: 0;
margin-bottom: 10px;
}

.sidebar-button img {
border-style: none;
}

.sidebar-button a {
border-style: none;
}

/* ================== TEXT STYLES ================== */

p.body-text {
font-size: 11px;
line-height: 16px;
margin-bottom: 16px;
color: #333;
float: left;
font-weight: normal;
}



h1 {
font-size: 18px;
font-weight: bold;
color: #4FAD26;
margin-bottom: 11px;
background: url('../images/chevron-big.gif') 0 5px no-repeat;
padding-left: 33px;
clear: both;
}

h2 {
line-height: 21px;
font-size: 14px;
font-weight: bold;
color: #333;
margin-bottom: 14px;
clear: both;
max-width: 500px;
margin-top: 0;
}

.green {
color: #4FAD26;
}

h3 {
color: #4FAD26;
font-size: 11px;
font-weight: bold;
line-height: 16px;
}

h5 {
color: #333333;
font-size: 11px;

line-height: 16px;
}

#content-wrapper a { color: #4FAD26; text-decoration: none; font-weight: bold; }
#content-wrapper a:link { color: #4FAD26; text-decoration: none; font-weight: bold; }
#content-wrapper a:visited { color: #4FAD26; text-decoration: none; font-weight: bold; }
#content-wrapper a:hover { color: #4FAD26;  text-decoration: underline; font-weight: bold; }

#footer a { color: #777; text-decoration: none; }
#footer a:link { color: #777; text-decoration: none; }
#footer a:visited { color: #777; text-decoration: none; }
#footer a:hover { color: #777;  text-decoration: underline; }

b, strong {
font-weight: bold;
}

.red {
color: #FF0000;
}

.grey {
color: #333;
}


#left-column ul {
list-style-position: outside;
list-style-type: none;
}

#left-column ul li {
font-size: 11px;
line-height: 17px;
margin-bottom: 15px;
color: #333;
padding-left: 21px;
background: url('../images/chevron-small.gif') 0 4px no-repeat;
}

/* ================== FLOAT STYLES ================== */

.float-left {
float: left;
}

.float-right {
float: right;
}

.clear-both {
clear: both;
}

/* ================== MEASURE STYLES ================== */
/* Sets the width of UL's or P's */

.wide-measure {
width: 400px;
}

.narrow-measure { /* Only used when images are floated either side of a UL or P */
width: 330px;
}

/* ================== CONTACT FORM ================== */

#contact-form {
margin: 0;
padding: 0;
width: 500px;
}

#contact-form form {
margin: 0;
padding: 0;
}

div.row {
clear: both;
padding-bottom: 30px;
}

div.row span.label {
float: left;
width: 120px;
text-align: right;
color: #4FAD26;
font-size: 11px;
font-weight: bold;
margin-right: 15px;
}

div.row span.labelbad {
float: left;
width: 120px;
text-align: right;
color: #FF0000;
font-size: 11px;
font-weight: bold;
margin-right: 15px;
}

div.spacer {
clear: both;
width: 10px;
height: 10px;
}

div.row span.formw {
float: left;
text-align: left;
}

#contact-form input {
width: 300px;
}

#contact-form textarea {
width: 300px;
height: 200px;
}

#contact-form input.submit {
width: 8em;
}

/* ================== IMAGE STYLES ================== */

.wide-image {
width: 506px;
height: auto;
background: #CCC;
margin-bottom: 18px;
clear: both;
}

.wide-image img {
border: 1px #CCC solid;
}

.image-column {
padding: 0;
width: 151px;
}

.add-gutter { /* Add a gutter to separate image column from text when images are on the left */
margin-right: 20px;
}

.image-column img {
display: block;
border: 1px #CCC solid;
margin-bottom: 15px;
clear: both;
}

.home-title {
pading: 0;
margin-bottom: 15px;
float: left;
}

.holding-header { /* Just for Holding Page */
pading: 0;
margin-bottom: 20px;
float: left;
}

/* ================== GUIDE BUTTON STYLES ================== */

#guide-button-container {
clear: both;
width: 100%;
float: left;
margin-bottom: 15px;
}

#guide-button-container img {
border: none;
}

.guide-button {
float: left;
margin-right: 10px;
}

/* ================== GUIDE PAGE STYLES ================== */

#guide-box .step-wide {
width: 213px;
margin-right: 21px;
}
#guide-box .step-wide img {
border: 1px solid #CCC;
} 

#guide-box {
width: 506px;
float: left;
background: url('../images/guide-bg-middle.jpg') repeat-y;
margin: 0;
padding: 0;
clear: both;
margin-bottom: 10px;
}

#guide-box-header {
width: 50px;
float: left;
}

#guide-box-footer {
width: 506px;
margin: 0;
padding-top: 0;
padding-bottom: 30px; /* Add some slack for the footer */
background: url('../images/guide-bottom.jpg') left bottom no-repeat;
float: left;
}

#guide-box-footer div.sub-footer-box { /* Position elements inside Guide Box footer container */
position: relative;
top: 0;
left: 23px;
width: 450px;
float: left;
clear: both;
margin: 0;
padding: 0;
}

#guide-box-footer div.footer-button-row {
margin: 0;
padding: 0;
clear: both;
}

#guide-box-footer div.footer-button {
display: block;
position: relative;
bottom: 0;
}

#guide-box-footer div.footer-button a img {
border: none;
}

#guide-box-body { /* Position elements inside Guide Box container */
position: relative;
left: 23px;
width: 497px;
float: left;
}

.guide-box-body-row {
float: left;
width: 100%;
clear: both;
padding-bottom: 25px;
}

#guide-box .step {
width: 139px;
margin-right: 16px;
}

#guide-box .step img {
border: 1px solid #CCC;
}

#guide-box .float-left p {
margin-top: 4px;
line-height: 12px;
text-align: left;
font-size: 10px;
color: #FFF;
}

/* ================== FAQs ================== */

ol.faq-list {
//list-style-position: outside;
padding-left: 2.0em;
font-weight: bold;
margin-bottom: 13px;
}

ol.faq-list li {
font-size: 11px;
color: #4FAD26;
line-height: 14px;
margin-bottom: 6px;
}

#content-wrapper a.back-to-top { color: #AAA; text-decoration: none; font-weight: bold; }
#content-wrapper a.back-to-top:link { color: #AAA; text-decoration: none; font-weight: bold; }
#content-wrapper a.back-to-top:visited { color: #AAA; text-decoration: none; font-weight: bold; }
#content-wrapper a.back-to-top:hover { color: #AAA;  text-decoration: underline; font-weight: bold; }

ol.faq-list li h3 {
margin-bottom: 5px;
}

ol.faq-list p { /* Effectively disables bold effect */
font-size: 11px;
line-height: 16px;
margin-bottom: 10px;
color: #333;
font-weight: normal;
}

/* ================== HR STYLES ================== */

.hr-light-grey {
float: left;
margin-top: 0;
margin-bottom: 20px;
display: block;
border-color: #CCC;
border-width: 1px;
border-style: none none solid none;
clear: both;
width: 100%;
height: 0;
line-height: 0; /* IE6 needs this */
}