@charset "UTF-8";
/* CSS Document ------------------------ 

	*FileName: 				styles3.css
	*Description:			Global CSS
	*Version:				1.0.0 (1-21-2010)
	*Website:				http://www.mutualmortgageprotection.com/

== Structure: ==========================

	*Page width:			1024px
	*Number of columns:		2
	
== TOC: ================================
Select text after the $ and use find 
to go to the section on the style sheet
========================================

	$__imports			Imported style sheets content
	$__tags				Header Definitions
	$__main				Main Site contnainer
	$__header			Header Content
	$__content			Everything within the content
	$__form				Global forms
	$__accordion		Accordion Styles
	$__right-column		Right column styles, include total amount
	$__contact us		Contact Us Form
	$__media-dode-ex	Example of where to find the Media Code
	
---------------------------------------- */

/* __imports 
---------------------------------------- */

@import url("reset.css");

/* __tags 
---------------------------------------- */

body {background:#e3d8c4; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:16px;}	

/* __main 
---------------------------------------- */

#wrapper {margin:5px auto; width:956px;}
.displayNone {display:none;}
.display {display:block;}

/* __header 
---------------------------------------- */

#header_top {background:url(../images/page_header.jpg) 0 0 no-repeat; height:32px; width:956px;}
#header_background {background:url(../images/bg_page.jpg) 1px 0 repeat-y; width:956px;}
#header_background #logo {float:left; width:218px; height:65px; margin:5px 0 0 25px; background:url(../images/logo.gif) 0 0 no-repeat;}
#header_background #header_number {float:right; width:150px; height:25px; margin:10px 25px 0 0; text-align:right;}

/* ========================================
The styles that are associated with #header_number
*/

#header_number .question {color:#999;}
#header_number .number {color:#ff9900; font-weight:bold;}

#header_background #header_shadow {background:url(../images/header_shadow.jpg) 0 0 repeat-x; height:7px; width: 940px; margin: 0 9px 0 9px;clear:both;}

/* __content 
---------------------------------------- */

#content_wrapper {background:url(../images/bg_page.jpg) 1px 0 repeat-y; width:956px;}
#content {width:906px; margin:0 auto; display:inline-block;}
#content h1 {font-size:24px; font-weight:bold; float:right; color:#000033; margin-top:20px;}
#content #left_col {float:left; width:576px; text-align:left; position:relative;}
#content #right_col {float:right; width:330px; height:850px; margin-top:30px; border-top:1px solid #CCC;}

#content #left_col ul#tabs {list-style:none; margin:0; padding:0;}
#content #left_col ul#tabs li {display:inline; background-image:url(../images/tabs.gif); height:30px; float:left;}
#content #left_col ul#tabs li#calculator_tab {background-position:-1px 0; width:120px;}
#content #left_col ul#tabs li#contact_us_tab {background-position:-121px 0; width:135px;}
#content #left_col ul#tabs li a {height:30px; display:block; text-decoration:none; border:medium none;}
#content #left_col ul#tabs li#calculator_tab a {width:133px;}
#content #left_col ul#tabs li#calculator_tab a {cursor:pointer;}
#content #left_col ul#tabs li#contact_us_tab a {width:133px;}
#content #left_col ul#tabs li#contact_us_tab a {cursor:pointer;}
#content #left_col ul#tabs.contact_us_selected li#contact_us_tab a {cursor:default; border-bottom:1px solid #fff;}
#content #left_col ul#tabs.calculator_selected li#calculator_tab a {cursor:default; border-bottom:1px solid #fff;}
#content #left_col ul#tabs.contact_us_selected li#contact_us_tab {background-position:-121px -32px; width:135px;}
#content #left_col ul#tabs.contact_us_selected li#calculator_tab {background-position:-1px -32px; width:120px;}
#content #left_col ul#tabs li span {display:none;}

#content #left_col #calculator_container {position:absolute; top:30px; left:0;}
#content #left_col #contact_container {position:absolute; top:30px; left:0;}
#content #left_col #form_container {width: 576px; border-top:1px solid #CCC; clear:both; text-align:center;}

/* __accordion 
---------------------------------------- */

#calculator {margin-top:20px; background:url(../images/sales_background.jpg) no-repeat bottom; height:888px;}
#calculator h3.ui-state-active {height:46px; width:574px; background:url(../images/accordion_header_selected.jpg) 0 0 repeat-x #ff9900; border:1px solid #ff9900; cursor:default;}
#calculator h3 {height:46px; width:574px; background:url(../images/accordion_header.jpg) 0 0 repeat-x #999; border:1px solid #999; cursor:pointer;}
#calculator h3 a {font-weight:bold; text-decoration:none; color:#666; margin:14px 0 0 10px; float:left; font-size:18px; text-indent:-9999px;}

#calculator h3 a#current_debt {background:url(../images/current_debt_text_bw.png) 0 0 no-repeat;height:46px; width:200px; margin:0;}
#calculator h3.ui-state-active a#current_debt {background:url(../images/current_debt_text.png) 0 0 no-repeat;height:46px; width:200px; margin:0;}
#calculator h3 a#long_term {background:url(../images/longterm_plans_text_bw.png) 0 0 no-repeat;height:46px; width:400px; margin:0;}
#calculator h3.ui-state-active a#long_term {background:url(../images/longterm_plans_text.png) 0 0 no-repeat;height:46px; width:400px; margin:0;}
#calculator h3 a#assets {background:url(../images/assets_text_bw.png) 0 0 no-repeat;height:46px; width:200px; margin:0;}
#calculator h3.ui-state-active a#assets {background:url(../images/assets_text.png) 0 0 no-repeat;height:46px; width:200px; margin:0;}
#calculator h3 a.question_mark {background:url(../images/qmark.png) 0 0 no-repeat; width:25px; height:25px; float:right; margin:10px 10px 0 0;}
#calculator h3.ui-state-active a.question_mark {background:url(../images/qmark.png) 0 -25px no-repeat; width:25px; height:25px; float:right; margin:10px 10px 0 0;}
#calculator #assets_content.ui-accordion-content-active {border-bottom:1px solid #ccc;}

#calculator div {text-align:center;}
#calculator div div.top_shadow {width:576px; height:6px; background:url(../images/accordion_top_shadow.jpg) 0 0 repeat-x #fff;}
#calculator div div.bottom_shadow {width:576px; height:7px; background:url(../images/accordion_bottom_shadow.jpg) 0 0 repeat-x #fff;}

#calculator-note {width:350px; margin:10px auto;}
#calculator-note p {font-size:10px; color:#666;}

/* __form 
---------------------------------------- */

#calculator form {width:450px; margin:25px 0 20px 50px;}
#calculator form table {width:500px; border-collapse:collapse;}
#calculator form table td {height:55px; color:#999; vertical-align:middle;}
#calculator form table td.label {width:225px;}
#calculator form table td.dollar {width:25px;}
#calculator form table td.input {width:250px;}
#calculator form table td.input table {width:210px;}
#calculator form table td.input table td {height:40px;} 
#calculator form table td.input input {width:186px; border:1px solid #999; font-size:16px; padding:6px; color:#999; text-align:right;}
#calculator form table td.continue {text-align:right;}
#calculator form table td.continue input {text-indent:-9999px; background:url(../images/btn-continue-now.png) 0 0 no-repeat; width:95px; height:35px; float:right; margin-right:49px;}
#calculator form table td.continue input:hover {text-indent:-9999px; background:url(../images/btn-continue-now.png) 0 -35px no-repeat;}

#calculator form table td.childrens_eduction {height:55px; color:#999; vertical-align:top; padding-top:10px;}
#calculator form table td.input table td.children {width:140px; text-align:right; font-weight:bold; padding:10px 0 0 10px;}
#calculator form table td.input table td.children_number {width:50px; padding:10px 10px 0 10px;}
#calculator form table td.input table td.multiplication_symbol {height:40px; width:140px; text-align:left; font-weight:bold; border-bottom:1px solid #ff9900; vertical-align:middle; padding-left:10px;}
#calculator form table td.input table td.college_price {height:40px; text-align:right; font-weight:bold; border-bottom:1px solid #ff9900; vertical-align:middle; padding-right:10px;}
#calculator form table td.input table td.college_price table {float:right; border-collapse:collapse; float:right; width:90px; height:30px;}
#calculator form table td.input table td.college_dollor {font-weight:bold;  border-bottom:1px solid #ff9900;}
#calculator form table td.input table td.college_price input {width:40px;}
#calculator form table td.input table td.children_total {height:40px; text-align:right; font-weight:bold; vertical-align:middle; padding-right:19px;}
#calculator form table td.input input#childrens_education {width:40px;}
#calculator form table td.input input#college_amount {width:70px; margin:5px 0 3px 0;}
#calculator form table td #dollor_sign {margin-right:5px;}


/* __contact us 
---------------------------------------- */

#contact {margin-top:20px;}
#contact h3 {height:46px; width:574px; background:url(../images/accordion_header_selected.jpg) 0 0 repeat-x #ff9900; border:1px solid #ff9900; cursor:default;}
#contact h3 a {font-weight:bold; text-decoration:none; color:#666; margin:14px 0 0 10px; float:left; font-size:18px; text-indent:-9999px;}

#contact h3 a#assets {background:url(../images/contact_us_text.png) 0 0 no-repeat;height:46px; width:200px; margin:0;}

#contact div {text-align:center;}
#contact div div.top_shadow {width:576px; height:6px; background:url(../images/accordion_top_shadow.jpg) 0 0 repeat-x #fff;}
#contact div div.bottom_shadow {width:576px; height:7px; background:url(../images/accordion_bottom_shadow.jpg) 0 0 repeat-x #fff;}
#contact form {width:400px; margin:25px auto 20px auto;}
#contact form table {width:425px;}
#contact form table td {height:55px; color:#999; vertical-align:middle;}
#contact form table td.label {width:175px;}
#contact form table td.dollar {width:25px;}
#contact form table td.input {width:225px;}
#contact form table td.input table {width:210px;}
#contact form table td.input table td {height:40px;} 
#contact form table td.input input, #contact form table td.input select {width:186px; border:1px solid #999; font-size:16px; padding:6px; color:#999;}
#contact form table td.input textarea {width:200px; height:100px; border:1px solid #999; font-size:16px; padding:6px; color:#999;}
#contact form table td.input select.state {width:auto;}
#contact form table td.input select.age {width:auto;}
#contact form table td.input input.zip {width:65px;}
#contact form table td.submit {text-align:right;}
#contact form table td.submit input {text-indent:-9999px; background:url(../images/btn-submit-now.png) 0 0 no-repeat; width:95px; height:35px; float:right; margin-right:11px;}
#contact form table td.submit input:hover {text-indent:-9999px; background:url(../images/btn-submit-now.png) 0 -35px no-repeat;}
#contact form table td.valid { background-position:220px 16px;}
#contact form table td.invalid { background-position:220px 16px;}

#contact form table td.childrens_eduction {height:55px; color:#999; vertical-align:top; padding-top:10px;}
#contact form table td.input table td.children {width:140px; text-align:right; font-weight:bold; padding:10px 0 0 10px;}
#contact form table td.input table td.children_number {width:50px; padding:10px 10px 0 10px;}
#contact form table td.input table td.multiplication_symbol {height:40px; width:140px; text-align:left; font-weight:bold; border-bottom:1px solid #ff9900; vertical-align:middle; padding-left:10px;}
#contact form table td.input table td.college_price {height:40px; width:60px; text-align:right; font-weight:bold; border-bottom:1px solid #ff9900; vertical-align:middle; padding-right:10px;}
#contact form table td.input table td.children_total {height:40px; text-align:right; font-weight:bold; vertical-align:middle; padding-right:10px;}

/* __right-column
---------------------------------------- */

#total_bullets {width:330px; margin:19px 0 0 15px; border-left:1px solid #ccc; text-align:center;}
#total_bullets table {width:300px; margin:0 auto 20px auto; border-collapse:collapse;}
#total_bullets table td {vertical-align:top; color:#666; font-weight:bold; font-size:14px; padding:20px 0 0 15px;}
#total_bullets table td.total_line {border-bottom:1px solid #ff9900; vertical-align:top; padding:15px 0 20px 15px;}
#total_bullets table td.final_total {font-size:16px; padding:15px 0 20px 15px;}
#total_bullets table td.dollar_amount {text-align:right; padding:0; padding-right:15px; vertical-align:middle; height:50px;}
#total_bullets table td.title_total { padding:0; padding-left:15px;  vertical-align:middle; height:50px;}
#total_bullets table td div#no_insurance_message {width:270px; background:#FF9; border:1px solid #FC0;}
#total_bullets table td div#no_insurance_message p {margin:10px 5px 10px 5px;}
#total_bullets table td.selected_background {background:#F1F1F1;}

#bullets {background:url(../images/life_insurance_bullets_middle.png) 0 0 repeat-y; width:323px; margin:0 0 0 5px;}
#bullets #bullet_top {background:url(../images/life_insurance_bullets_top.png) 0 0 no-repeat; width:323px; height:18px;}
#bullets #bullet_bottom {background:url(../images/life_insurance_bullets_bottom.png) 0 0 no-repeat; width:323px; height:18px;}
#bullets #bullet_middle {width:295px;text-align:left; margin:10px 20px 16px 20px;}
#bullets #bullet_middle span#bullet_header {font-size:17px; font-weight:bold; color:#ff9900;}
#bullets #bullet_middle ul {margin:10px 15px;}
#bullets #bullet_middle li {margin:10px 5px; list-style:square; font-size:16px; color:#ff9900;}
#bullets #bullet_middle li span {font-size:14px; color:#999;}

#booklet {background:url(../images/booklet.jpg) 10px 20px no-repeat; width:300px; height:128px; margin:20px 0 0 30px; display:inline-block; cursor:pointer;}
#booklet a { text-decoration:none; cursor:pointer;}
#booklet div {width:200px; height:128px; font-size:16px; font-weight:bold; color:#999933; text-align:left; margin:19px 0 0 110px; line-height:18px;}
#booklet div span {width:200px; font-size:11px; font-weight:normal; color:#999; text-align:left; margin-top:5px;}

/* __footer
---------------------------------------- */

#footer {width:906px; margin:0 auto; display:inline-block;}
#footer div#number {text-align:right; width:300px; font-size:12px; float:right; margin:0 10px 10px 0; color:#999;}
#footer div#number span {font-size:16px; font-weight:bold; color:#ff9900;}
#footer #footerline {border:0; border-top:1px solid #CCC; width:100%; clear:both; margin-bottom:10px;}
#footer div#links {text-align:right; width:350px; float:right; margin-bottom:10px; font-size:12px; margin:0 10px 10px 0; color:#999;}
#footer div#links a {color:#ff9900; text-decoration:none;}
#footer div#links a:hover {text-decoration:underline;}
#footer div#links a span {font-weight:bold;}
#footer_bottom {background:url(../images/page_footer.jpg) bottom no-repeat; height:23px; width:956px}
#footer_copy {width:600px; text-align:left; float:left; margin:0 0 25px 25px;}
#footer_copy p {font-size:11px; color:#999; margin-top:10px;}
#footer_copy .bold {font-weight:bold;}
#footer_copy p#afn {margin-top:30px;}


/* __thank you
------------------------------------------*/

#thankyou {width:100%; text-align:left; margin:25px 0 0 10px; font-size:18px; color:#999; font-weight:normal; background-color:#FFF;}
#thankyou p {margin-top:10px; line-height:22px;}
#thankyou strong {font-weight:bold;}
#thankyou div.links {margin-top:30px; color:#ff9900; font-size:14px;}
#thankyou div.links a {color:#ff9900; text-decoration:none;}

/* __media-dode-ex
------------------------------------------*/
.jqmWindow {display: none; position: fixed; top: 17%; left: 50%; margin-left: -300px; width: 600px; background-color: #FFF; color: #333; border: 1px solid black; padding: 12px;}
a.window {font-size: 12px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#ff9900; text-decoration: none; margin:5px;"} 
a.window:hover {text-decoration: underline;}
p.window {font-size: 12px; font-family:Verdana, Arial, Helvetica, sans-serif; color: #666;}