/* * Project: RosettaStone� * Date: 2009/11/02 /* ---------------------------------------- */ #dhtmltooltip{position: absolute;width:150px;font-size:11px;border: 1px solid #a0a0a0;padding: 2px;background-color: #FFF49C;visibility: hidden;z-index: 100;} * { margin: 0; padding: 0; } html { min-height: 100%; margin: 0 0 1px; font-size: 100.01%; } body { background: #C2B7A0; font-size: 62.5%; } @media only screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } } body, textarea, input, select, option, button { color: #747474; font-family: Arial, Helvetica, sans-serif; line-height: 1.25; } li, dt, dd, p, th, td, caption, pre { font-size: 1.3em; } ul, ol, dl, p, table, pre, h1, h2, h3, h4, h5, h6 { margin-bottom: 15px; } a { color: #09f; text-decoration: underline; } a:hover, a:focus, a:active { color: #000; text-decoration: underline; } ul, ol, dd, blockquote { padding-left: 40px; } ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; } li *, li p, li li, dt *, dd *, p *, th *, td * { font-size: 1.0em; } img { border: none; -ms-interpolation-mode: bicubic; } pre { font-family: "Courier New",monospace; white-space: pre-wrap; } table { border-collapse: collapse; border-spacing: 0; } button { overflow: visible; padding: 0 10px; cursor: pointer; } button::-moz-focus-inner { padding: 0; border: none; } hr { overflow: hidden; height: 1px; margin: 15px 0 !important; margin: -5px 0 8px; padding: 0; border: none; background-color: #ccc; color: #ccc; } *:first-child+html hr { margin: -7px 0 8px !important; } .offset { position: absolute !important; left: -10001px !important; overflow: hidden !important; } /* LAYOUT ------------------------------------------- */ #top { background: #fff; } #top .wrapper { overflow: hidden; width: 893px; margin: 0 auto; padding-top: 32px; } #top .col-a { float: left; width: 60%; padding-left: 6px; } #logo { margin: 0; color: #675545; font-size: 3.2em; } #logo a { color: #675545; text-decoration: none; } #logo a span { color: #0b0b0b; font-size: 0.45em; font-weight: normal; letter-spacing: -0.02em; } #logo a em { font-weight: normal; font-style: normal; } #skip-links { position: absolute; top: 0; left: -10001px; list-style: none; margin: 0; padding: 0; } #skip-links li a:focus, #skip-links li a:active { display: block; position: absolute; left: 10001px; top: 0; z-index: 10001; width: 200px; margin: 15px 0 0 15px; padding: 2px 0; background: #333; color: #fff; text-align: center; text-decoration: none; } #nav { float: right; list-style: none; margin: 0; padding: 0 5px 0 0; } #nav li { float: left; padding-left: 2px; background: url(../images/brd-1.png) 0 50% no-repeat; } #nav li a { display: block; padding: 0 18px; color: #fff; text-decoration: none; line-height: 29px; } #nav li a:hover { text-decoration: underline; } #nav li em { position: absolute; left: -10001px; top: -10001px; } #content { background: url(../images/bg-1.png) 0 0 repeat-x; } #content .wrapper { overflow: hidden; width: 893px; margin: 0 auto; } #footer { overflow: hidden; width: 885px; margin: 0 auto; } .box-e .list-a { position: absolute; bottom: 0; } .box-f { overflow: hidden; width: 100%; padding: 7px 0; background: #c5b5a9; } .box-f p { float: left; width: 40%; margin: 0; padding-left: 27px; color: #fff; line-height: 34px; } .box-g { width: 791px; min-height: 121px; margin: 0 auto 10px auto; padding: 13px 20px; border: 1px solid #dbdada; } * html .box-g { height: 121px; } .bg-a { width: 827px; padding: 2px; } .box-h { overflow: hidden; width: 835px; margin: 0 auto 10px auto; } .box-h p.image { float: left; width: 425px; margin: 0; } .box-h p.image img { display: block; } .box-h div { float: left; width: 405px; } .box-h div p { margin: 0; font-size: 1.8em; color: #745f4d; line-height: 1.44; } .bh-a p.image { width: 340px; } .bh-a div { width: 490px; } .box-i5 { overflow: hidden; width: 800px; margin: 0 auto 10px auto; padding-top: 25px; } .box-i { overflow: hidden; width: 835px; margin: 0 auto 10px auto; padding-top: 25px; } .box-i p.image { float: left; width: 400px; margin: 0; } .box-i p.image img { display: block; } .box-i div { float: left; width: 408px; padding-top: 10px; } .box-i div p { color: #898888; line-height: 1.33; } .btn button { display: block; width: 151px; height: 23px; margin: 0; padding: 0 0 3px 0; color: #ffffff; background: url(../images/btn-3.png) 0 0 no-repeat; border: none; } .cols-two-a { overflow: hidden; width: 100%; padding-top: 15px; } .cols-two-a .primary-ta { float: left; width: 123px; padding-right: 10px; } .cols-two-a .secondary-ta { float: left; width: 250px; } .cols-two-b { position: relative; overflow: hidden; width: 831px; margin: 0 auto; padding: 10px 0 30px 0; border: 1px solid #dbdada; } .cols-two-b .wrapper-a { float: left; width: 831px; background: url(../images/brd-6.png) 0 0 repeat-y; } .cols-two-b .primary-tb { float: left; width: 520px; padding: 16px 65px 0 16px; } .cols-two-b .secondary-tb { float: left; padding: 6px 0 0 6px; } .cols-three-a { position: relative; overflow: hidden; width: 831px; margin: 0 auto; padding: 10px 0 53px 0; border: 1px solid #dbdada; } .cols-three-a .wrapper-a { float: left; width: 831px; background: url(../images/brd-4.png) 0 0 repeat-y; } .cols-three-a .primary-th-a { float: left; width: 173px; padding: 30px 0 0 10px; } .cols-three-a .primary-th-a p { font-size: 1.3em; padding-right: 10px; line-height: 1.45; } .cols-three-a .secondary-th-a { float: left; width: 390px; padding: 30px 0 0 0; } .cols-three-a .tertiary-th-a { float: left; padding: 17px 0 0 20px; } .cta-a .wrapper-a { background: url(../images/brd-5.png) 0 0 repeat-y; } .cta-a .secondary-th-a { float: left; width: 422px; padding: 30px 0 0 0; } .wrapper-b { clear: both; } /* forms */ .form-a { width: 615px; margin: 65px auto 0 auto; padding-bottom: 17px; background: url(../images/rc-2-btm.png) 0 100% no-repeat; } .form-a .wrapper-a { overflow: hidden; width: 615px; padding: 55px 0 19px 0; background: url(../images/rc-2-top.png) 0 0 no-repeat; } .form-a p { overflow: hidden; width: 345px; margin: 0; padding: 0 0 6px 165px; } .form-a p label { display: block; float: left; width: 65px; padding-top: 4px; color: #5b5b5a; font-weight: bold; } .form-a p input { width: 211px; padding: 3px 2px; border: 1px solid #d5d5d2; } /* -- vrax -- */ .form-a p input.chkbox{ padding:0;border:none;width:20px; } .bold {font-weight:bold;} .infobtn{width: 18px; height: 16px; margin: 2px 0 0 3px;border:none;cursor:pointer;} #dhtmltooltip_new{position: absolute;width:200px;font-size:11px;border: 1px solid #C5B5A9;padding:10px;background-color: #DED4CD;visibility: hidden;z-index: 100;} table.steplinks{} table.steplinks th, table.steplinks td{padding:0;border:none;font-size:11px;} .step_n{} .step_s{color: #b2723a; font-weight: bold; } .noborder{border:none;} /* -- # -- */ .form-a p.btn { width: 100%; padding: 24px 0 0 0; font-size: 1.4em; color: #80807f; text-align: center; } .form-a p button { width: 114px; height: 36px; margin: 0; padding: 0 3px 0 0; border: none; background: url(../images/btn-1.png) 0 0 no-repeat; line-height: 33px; text-align: center; } .form-b .fields-a p { position: relative; overflow: hidden; width: 100%; margin-bottom: 8px; } .form-b .fields-a label { display: block; float: left; width: 123px; padding: 4px 10px 0 0; text-align: right; } .form-b .fields-a label span { font-size: 0.9em; } .form-b .fields-a div { right: 45px; } .form-b .fields-a input { float: left; width: 191px; padding: 3px 9px; background: #efefef; border: 1px solid #d3d1d1; } .form-b .fields-a input.file { background: #fff; margin-right: 3px; } .form-b .fields-b p { overflow: hidden; width: 100%; margin-bottom: 8px; } .form-b .fields-b p.field-a { position: relative; } .form-b .fields-b p.field-a a.more { position: absolute; bottom: 2px; right: 18px } .form-b .fields-b label { display: block; float: left; width: 12px; padding-top: 3px; } .form-b .fields-b input { width: 204px; color: #747474; padding: 3px 9px; font-size: 0.9em; background: #efefef; border: 1px solid #d3d1d1; } .form-b .fields-b textarea { float: left; width: 237px; height: 134px; padding: 3px 9px; font-size: 0.9em; border: 1px solid #d3d1d1; } .form-b .fb-a label { width: 116px; padding: 4px 10px 0 0; font-weight: bold; text-align: right; } .form-b .fields-c p { overflow: hidden; width: 100%; margin-bottom: 8px; } .form-b .fields-c p strong { display: block; float: left; width: 150px; padding: 0 10px 0 0; font-weight: bold; text-align: right; } .form-b .fields-c div { overflow: hidden; width: 100%; margin-bottom: 8px; } .form-b .fields-c div p { width: auto; float: left; width: 116px; padding: 5px 10px 0 0; font-weight: bold; text-align: right; } .form-b .btn { position: absolute; bottom: 30px; left: 50%; margin: 0 0 0 -75px; text-align: center; font-size: 1.1em; } .form-b .btn button { display: block; width: 151px; height: 23px; margin: 0; padding: 0 0 3px 0; color: #ffffff; background: url(../images/btn-3.png) 0 0 no-repeat; border: none; } .form-b .btn-a { overflow: hidden; width: 240px; padding-left: 126px; margin-bottom: 5px; } .form-b .btn-a button { float: left; display: block; width: 78px; height: 23px; margin: 0; padding: 0 0 3px 0; color: #ffffff; background: url(../images/btn-4.png) 0 0 no-repeat; border: none; } /* tables */ table { } table th, table td { padding: 5px 10px; border: 1px solid #ccc; } .table-a { width: 100%; margin: 0; } .table-a th, .table-a td { border: none; } .table-a thead th { background: #cecccc; padding: 15px 0 15px 40px; color: #fff; text-align: left; font-weight: normal; } .table-a thead th.col1 { width: 132px; border-right: 1px solid #fff; } .table-a tbody td { padding: 5px 5px 5px 40px; } .table-a tbody tr.row-a { background: #f5f5f5; } .table-b { margin: 0; } .table-b th, .table-b td { border: none; } /* lists */ .list-a { list-style: none;width: 100%; margin: 0; padding: 0 0 20px 0; text-align: center; min-height: 1px; } .list-a li { display: inline; 0 50% no-repeat; } .list-a li.first { background: none; } .list-a li a { padding: 0 6px 0 9px; color: #796350; text-decoration: none; } .list-a li a:hover { color: #796350; text-decoration: underline; } .list-b { list-style: none; margin: 0; padding: 14px 0 28px 0; text-align: center; } .list-b li { display: inline; padding: 0 4px; } .list-c { float: right; list-style: none; margin: 0; padding: 0 4px 0 0; } .list-c li { float: left; background: url(../images/brd-3.png) 0 0 repeat-y; } .list-c li a { display: block; height: 34px; color: #fff; padding: 0 14px; line-height: 34px; text-decoration: none; } .list-c li a:hover { color: #fff; text-decoration: underline; } * html .list-c li a { float: left; } .list-d { margin: 0; padding: 0; list-style-position: inside; } .list-d li { color: #77614f; font-weight: bold; line-height: 2.1; } .list-d li a { color: #77614f; } .list-d li a:hover { color: #77614f; text-decoration: none; } .list-e { overflow: hidden; list-style: none; margin: 0; padding: 15px 0 0 230px; } .list-e li { float: left; font-size: 1.1em; letter-spacing: -0.01em; } .list-e li span { display: block; padding-bottom: 72px; background: url(../images/buttons-1.png) 0 0 no-repeat; } .list-e li span.active { color: #b2723a; font-weight: bold; } .list-e li a { display: block; padding-bottom: 72px; background: url(../images/buttons-1.png) 0 0 no-repeat; text-decoration: none; } .list-e li a.active { color: #b2723a; font-weight: bold; text-decoration: none; } .list-e li.purchase a, .list-e li.purchase span { width: 122px; background-position: 0 20px; } .list-e li.purchase a:hover, .list-e li.purchase a.active, .list-e li.purchase span.active { width: 122px; background-position: 0 -110px; } .list-e li.optional a , .list-e li.optional span { width: 125px; background-position: -122px 20px; } .list-e li.optional a:hover, .list-e li.optional a.active, .list-e li.optional span.active { background-position: -122px -110px; } .list-e li.descriptions a, .list-e li.descriptions span { width: 122px; background-position: -247px 20px; } .list-e li.descriptions a:hover, .list-e li.descriptions a.active, .list-e li.descriptions span.active { background-position: -247px -110px; } .list-e li.test a, .list-e li.test span { width: 70px; background-position: -370px 20px; } .list-e li.test a:hover, .list-e li.test a.active, .list-e li.test span.active { background-position: -370px -110px; } .list-f { list-style: none; margin: 0; padding: 0; } .list-f li { float: left; padding-right: 2px; } .list-f li a { display: block; width: 18px; height: 26px; padding: 0 4px 3px 0; color: #fff; text-decoration: none; background: url(../images/btn-5.png) 0 0 no-repeat; text-align: center; line-height: 23px; } .list-f li a.symsel { display: block; width: 18px; height: 26px; padding: 0 4px 3px 0; color: #fff; text-decoration: none; background: url(../images/btn-5-over.png) 0 0 no-repeat; text-align: center; line-height: 23px; } .list-f li a:hover { background: url(../images/btn-5-over.png) 0 0 no-repeat;} /* paragraphs */ .text-a { margin-bottom: 18px; color: #0b0b0b; clear: left; font-size: 1.3em; } .text-b { float: right; width: 30%; margin: 0; padding: 26px 8px 0 0; } .text-b a { display: block; float: right; height: 40px; padding-left: 67px; color: #796350; background: url(../images/ico-1.png) 0 50% no-repeat; text-decoration: none; line-height: 40px; } .text-b a:hover { text-decoration: underline; } .text-c { text-align: center; padding-top: 17px; } .text-c a { color: #686749; font-weight: bold; } .text-c a:hover { color: #686749; text-decoration: none; } .text-d { overflow: hidden; width: 100%; } .text-d span { display: block; float: left; width: 123px; padding: 3px 10px 0 0; text-align: right; font-weight: bold; } .text-d strong { color: #b2723a; font-size: 1.33em; } .text-e { padding-left: 126px; color: #4877ee; font-size: 1.1em; } /* links */ .link-a { display: block; float: left; overflow: hidden; width: 78px; height: 23px; margin: 10px 0 0 5px; vertical-align: middle; background: url(../images/btn-2.png) 0 0 no-repeat; text-indent: -10001px; } .more { display: block; float: left; overflow: hidden; width: 18px; height: 16px; margin: 2px 0 0 3px; background: url(../images/ico-2.png) 0 0 no-repeat; text-indent: -10001px; } .js .m-a { position: absolute; right: 25px; } /* other */ .okmsg {color:#088A08; font-weight:bold; font-size:12px;} .errormsg {color:#FF3300; font-weight:bold; font-size:12px;} /* SPECIFIC ------------------------------------------- */