/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.clear { clear: both; }
.alignleft, .left { float: left; margin-top: 5px; margin-right: 12px; margin-bottom: 10px; }
.alignright, .right { float: right; margin-top: 5px; margin-left: 12px; margin-bottom: 10px; text-align: right; }
.aligncenter, .center { float: none; display: block; margin: 10px auto; text-align: center; }
a img { border: 0; }
form { margin: 0; padding: 0; }
.nowrap { white-space: nowrap; }
a { cursor: pointer; }
/* prevent nested elements from increasing font sizes */
ul ul, ol ol, ol ul, ul ol, table table, table p, table ol, table ul, table blockquote, td td, td th, th td, th th,
blockquote table, blockquote p, blockquote ul, blockquote ol, li p, table label, table select, table input, table textarea, 
p label, p input, p select, p textarea, blockquote input, blockquote textarea, blockquote select, blockquote label, li label, table address, blockquote address, li address, address label, label address, 
p address, address p, p .btn, p a.btn, p a.btn:link, p a.btn.visited, p a.btn:active, table .btn, table a.btn, table a.btn:link, table a.btn.visited, table a.btn:active {
    font-size: 1em;
}
blockquote h3 {
    font-size: 1.2em;
}

/* main styles */
html {
    position: relative;
    margin: 0;
    padding: 0;
}
body {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: "PT Sans", "Arial", sans-serif;
    font-size: 62.5%;
    color: #333;
    -webkit-font-smoothing: antialiased;
}
hr {
    margin: 20px 0 60px 0;
    padding: 0;
    background: #ccc;
    border: 0;
    color: #ccc;
    height: 1px;
}
p, h1, h2, h3, h4, h5, h6, ul, ol, th, td {
    margin: 0;
    padding: 10px 0 5px 0;
    font-size: 1.6em;
    line-height: 1.5;
}
blockquote {
    font-size: 1.6em;
}
ul li, ol li {
    margin-bottom: 8px;
}
h1 {
    font-size: 3.4em;
    color: #000;
}
h2 {
    font-size: 2.8em;
    color: #000;
}
h3 {
    font-size: 2.4em;
    font-weight: normal;
    color: #000;
}
h4 {
    font-size: 1.6em;
    font-weight: bold;
    color: #000;
}
.note {
    font-size: 1.4em;
    font-style: italic;
}
span.note {
    font-size: .8em;
}
.required {
    color: #f00;
}
a:link, a:visited, a:active {
    color: #06c;
}
a:hover {
    color: #6c0;
}
.btn, a.btn:link, a.btn:visited, a.btn:active {
    padding: 2px 10px;
    background: #6FDAF0;
    border: 1px solid #000;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size: 1.6em;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}
.btn:hover, a.btn:hover {
    background: #d6d6d6;
    color: #000;
}
input, select, textarea {
    padding: 2px 10px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-family: "PT Sans", Arial, Sans-Serif;
    font-size: 1.6em;
    color: #333;
}
select {
    padding: 1px 10px;
}


/* header */
#header-container {
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
}
#header {
    margin: 0 auto;
    padding-top: 10px;
}
#logo {
    float: left;
    padding: 0 0 10px 0;
    width: 170px;
}
#login {
    float: right;
    padding: 10px 0 0 0;
}
#login .btn {
    margin-left: 5px;
    font-size: 1.2em;
    font-weight: normal;
}
#nav {
    clear: right;
    float: right;
    padding: 0 0 5px 0;
}
#nav ul {
    list-style: none;
    text-align: right;
}
#nav ul li {
    display: inline;
    padding: 0 5px;
}
#nav ul li:last-child {
    padding-right: 0;
}
#nav a:link, #nav a:visited, #nav a:active {
    color: #333;
    text-decoration: none;
}
#nav a:hover {
    color: #6c0;
}
/* vertical small phone size (e.g. iPhone 5) */
@media screen and (min-width: 320px){
}
/* vertical standard phone size (e.g. iPhone 6)  */
@media screen and (min-width: 375px){
}
/* vertical plus phone size (e.g. iPhone 6 Plus, Nexus 6P)  */
@media screen and (min-width: 412px){
}
/* horizontal small phone size (e.g. iPhone 5) */
@media screen and (min-width: 568px){
}
/* horizontal standard phone size (e.g. Galaxy S) */
@media screen and (min-width: 640px){
}
/* horizontal plus phone size (e.g. iPhone 6 Plus, Nexus 6P) */
@media screen and (min-width: 732px){
}
/* vertical tablet size (e.g. iPad) */
@media screen and (min-width: 768px){
}
/* horizontal tablet size, standard desktop size (e.g. iPad, desktop) */
@media screen and (min-width: 960px){
    #header {
        width: 980px;
    }
}

/* banner */
#banner-home-container, #banner-sub-container {
    background: #f5f4e9;
    border: 1px solid #ccc;
    border-width: 0 0 1px 0;
}
#banner-home {
    margin: 0 auto;
    width: 100%;
    height: 400px;
    background: url(../images/banner-esp-01.jpg) no-repeat;
}
#banner-sub {
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}
#banner-home h1, #banner-sub h1 {
    font-size: 3.4em;
    line-height: 1;
}
#banner-home ul, #banner-sub ul {
    padding: 10px 0 5px 26px;
    font-size: 2.4em;
}
#banner-sub-cta {
    padding: 20px 0 40px 0;
    text-align: center;
}
#banner-sub-cta img {
    display: block;
    margin: 0 auto 15px auto;
}
/* vertical small phone size (e.g. iPhone 5) */
@media screen and (min-width: 320px){
}
/* vertical standard phone size (e.g. iPhone 6)  */
@media screen and (min-width: 375px){
}
/* vertical plus phone size (e.g. iPhone 6 Plus, Nexus 6P)  */
@media screen and (min-width: 412px){
}
/* horizontal small phone size (e.g. iPhone 5) */
@media screen and (min-width: 568px){
}
/* horizontal standard phone size (e.g. Galaxy S) */
@media screen and (min-width: 640px){
}
/* horizontal plus phone size (e.g. iPhone 6 Plus, Nexus 6P) */
@media screen and (min-width: 732px){
}
/* vertical tablet size (e.g. iPad) */
@media screen and (min-width: 768px){
    #banner-home-content {
        margin: 0;
        padding: 40px 0 0 600px;
        width: 360px;
    }
    #banner-sub-content {
        margin: 0;
        padding: 40px 0 30px 350px;
        width: 350px;
    }
    #banner-sub-cta {
        float: left;
        margin-top: 40px;
        margin-left: 20px;
    }
}
/* horizontal tablet size, standard desktop size (e.g. iPad, desktop) */
@media screen and (min-width: 960px){
    #banner-home, #banner-sub {
        width: 980px;
    }
    #banner-sub-content {
        padding: 40px 0 30px 460px;
        width: 400px;
    }
    #banner-sub-cta {
        margin-top: 40px;
        margin-left: 140px;
    }
}

/* home body */
#cta {
    margin: 0 auto;
    padding: 30px 0;
}
.cta-option {
    padding-bottom: 40px;
    text-align: center;
}
.cta-option img {
    display: block;
    margin: 0 auto 15px auto;
    width: 100%;
}
#pricing-container {
    background: #f5f4e9;
}
#pricing {
    margin: 0 auto;
    padding: 20px 0 30px 0;
}
.pricing-option:last-child {
    margin: 0;
}
.pricing-option .quantity {
    width: 100px;
}
#main-home {
    margin: 0 auto;
    padding: 0 0 30px 0;
}
#main-home h2 {
    padding: 30px 0 15px 0;
}
.main-home-option {
    padding-bottom: 40px;
}
.main-home-option img, .main-home-option-states img {
    float: left;
    height: 150px;
    width: 150px;
    margin: 5px 20px 70px 0;
}
.main-home-option ul {
    padding-left: 25px;
}
/* vertical small phone size (e.g. iPhone 5) */
@media screen and (min-width: 320px){
}
/* vertical standard phone size (e.g. iPhone 6)  */
@media screen and (min-width: 375px){
}
/* vertical plus phone size (e.g. iPhone 6 Plus, Nexus 6P)  */
@media screen and (min-width: 412px){
}
/* horizontal small phone size (e.g. iPhone 5) */
@media screen and (min-width: 568px){
}
/* horizontal standard phone size (e.g. Galaxy S) */
@media screen and (min-width: 640px){
}
/* horizontal plus phone size (e.g. iPhone 6 Plus, Nexus 6P) */
@media screen and (min-width: 732px){
}
/* vertical tablet size (e.g. iPad) */
@media screen and (min-width: 768px){
    .cta-option {
        float: left;
        margin: 0 30px 0 0;
        padding: 10px 10px 20px 10px;
        width: calc(25% - 45px);
        background: #f5f4e9;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        text-align: center;
    }
    .cta-option:last-child {
        margin: 0;
    }
    .pricing-option {
        float: left;
        margin: 0 20px 0 0;
        padding: 0;
        width: calc(50% - 20px);
    }
    .main-home-option {
        float: left;
        width: calc(50% - 20px);
    }
    .main-home-option-2 {
        float: right;
    }
}
/* horizontal tablet size, standard desktop size (e.g. iPad, desktop) */
@media screen and (min-width: 960px){
    #main-home, #cta, #pricing {
        width: 980px;
    }
}


/* main */
#main {
    margin: 0 auto;
    padding: 30px 0;
}
#main ul, #main ol {
    padding-left: 30px;
}
.col-full {
    clear: both;
    padding-bottom: 30px;
    width: 100%;
}
/* vertical small phone size (e.g. iPhone 5) */
@media screen and (min-width: 320px){
}
/* vertical standard phone size (e.g. iPhone 6)  */
@media screen and (min-width: 375px){
}
/* vertical plus phone size (e.g. iPhone 6 Plus, Nexus 6P)  */
@media screen and (min-width: 412px){
}
/* horizontal small phone size (e.g. iPhone 5) */
@media screen and (min-width: 568px){
}
/* horizontal standard phone size (e.g. Galaxy S) */
@media screen and (min-width: 640px){
}
/* horizontal plus phone size (e.g. iPhone 6 Plus, Nexus 6P) */
@media screen and (min-width: 732px){
}
/* vertical tablet size (e.g. iPad) */
@media screen and (min-width: 768px){
    .col2-1, .col2-2 {
        float: left;
        padding-bottom: 30px;
        width: calc(50% - 20px);
    }
    .col2-2 {
        float: right;
    }
    .col3-1, .col3-2, .col3-3 {
        float: left;
        margin-right: 25px;
        padding-bottom: 30px;
        width: calc(33% - 25px);
    }
    .col3-3 {
        float: right;
        margin-right: 0;
    }
}
/* horizontal tablet size, standard desktop size (e.g. iPad, desktop) */
@media screen and (min-width: 960px){
    #main {
        width: 980px;
    }
}



/* main / new subpages / new sub-pages */
#main-sub {
    /* */
}
#main-sub-highlight {
    background: #f5f4e9; /* For browsers that do not support gradients */
}
.form-cta {
    padding: 15px 20px 30px 20px;
    margin: 0 10px;
    background: #f5f4e9;
    text-align: center;
}
.col-full-container {
    padding: 20px 20px;
}
.col-full-container ul {
    padding-left: 20px;
}
#main-sub-highlight .col-full-container {
    padding: 0;
}
#main-sub .btn-focus {
    font-size: 1.5em;
}
/* vertical small phone size (e.g. iPhone 5) */
@media screen and (min-width: 320px){
}
/* vertical standard phone size (e.g. iPhone 6)  */
@media screen and (min-width: 375px){
}
/* vertical plus phone size (e.g. iPhone 6 Plus, Nexus 6P)  */
@media screen and (min-width: 412px){
}
/* horizontal small phone size (e.g. iPhone 5) */
@media screen and (min-width: 568px){
}
/* horizontal standard phone size (e.g. Galaxy S) */
@media screen and (min-width: 640px){
}
/* horizontal plus phone size (e.g. iPhone 6 Plus, Nexus 6P) */
@media screen and (min-width: 732px){
}
/* vertical tablet size (e.g. iPad) */
@media screen and (min-width: 768px){
    #main-sub-highlight {
        padding: 30px 0 20px 0;
    }
    .form-cta {
        float: left;
        width: calc(50% - 50px);
        margin-left: 0;
    }
    .form-cta:last-child {
        margin-right: 0;
    }
}
/* horizontal tablet size, standard desktop size (e.g. iPad, desktop) */
@media screen and (min-width: 960px){
    .col-full-container {
        margin: 0 auto;
        width: 980px;
    }
}



/* footer */
#footer-container {
    background: #e1e1e1;
    border-top: 32px solid #ccc;
}
#footer {
    margin: 0 auto;
    padding: 30px 0;
}
#footer h4 {
    padding: 0;
    font-size: 1.8em;
    font-weight: bold;
    color: #000;
}
#footer ul, #footer p {
    font-size: 1.4em;
}
#footer ul {
    list-style: none;
}
#footer a:link, #footer a:visited, #footer a:active {
    color: #333;
    text-decoration: none;
}
#footer a:hover {
    color: #6c0;
}
#copyright {
    padding: 20px 0 0 0;
}
#copyright p {
    padding: 0;
    font-size: 1.2em;
}x
/* vertical small phone size (e.g. iPhone 5) */
@media screen and (min-width: 320px){
}
/* vertical standard phone size (e.g. iPhone 6)  */
@media screen and (min-width: 375px){
}
/* vertical plus phone size (e.g. iPhone 6 Plus, Nexus 6P)  */
@media screen and (min-width: 412px){
}
/* horizontal small phone size (e.g. iPhone 5) */
@media screen and (min-width: 568px){
}
/* horizontal standard phone size (e.g. Galaxy S) */
@media screen and (min-width: 640px){
}
/* horizontal plus phone size (e.g. iPhone 6 Plus, Nexus 6P) */
@media screen and (min-width: 732px){
}
/* vertical tablet size (e.g. iPad) */
@media screen and (min-width: 768px){
    .footer-col {
        float: left;
        margin-left: 20px;
        width: 260px;
    }
    .footer-col:first-child {
        margin-left: 0;
        width: 140px;
    }
    .footer-col {
        float: left;
        margin-left: 20px;
        width: 260px;
    }
    .footer-col:first-child {
        margin-left: 0;
        width: 140px;
    }
    #certificates {
        float: right;
        width: 260px;
        text-align: right;
    }
}
/* horizontal tablet size, standard desktop size (e.g. iPad, desktop) */
@media screen and (min-width: 960px){
    #footer {
        width: 980px;
    }
}


/* misc */
.alert { color: #f00; }
.theader { background: #e1f4ff; }
	/* line up all the form inputs on register page */
	td.register, td.register_ph { padding-bottom: 5px; }
	td.register input { width: 215px; border: 1px solid #999; }
	td.register_ph input { border: 1px solid #999; }
	td.register em { font-size: 10px; }

	/* product comparison matrix */
	.matrixchart { width: 100%; border: 0; padding: 0; }
	.matrixchart th { padding: 5px 10px; vertical-align: top; text-align: center; background: #9ad6f4; }
	.matrixchart td { padding: 5px 10px; vertical-align: top; }
	.matrixchart tr:nth-child(odd) td { background: #eee; }
	.matrixchart tr td:first-child { font-weight: bold; background: #e1f4ff; text-align: left; }







/* state e-file map */
.jurisdiction-box h3 { clear: both; padding: 5px 15px; text-align: left; font-size: 16px; color: #003366; margin: 10px 0 0 0; border-bottom: 2px solid #036; }
.bodymargin { padding: 10px; }
.jurisdiction-box { display: none; }
.jurisdiction-box p { margin: 0; padding: 10px 3px; }
.desc-box { float: right; width: 380px; }
.desc-text { clear: both; width: 330px; float: left; padding: 0 15px; background: #eee;  }
.desc-title { float: left; width: 120px; font-weight: bold; }
.desc-link { float: right; padding-left: 5px; }
.j-backlink { padding: 5px 15px; text-align: right; }

/* clue tip */
a.localctip, a.localctip:link, a.localctip:active, a.localctip:visited { color: #0099cc; text-decoration: underline; cursor:help; }
.localctip img { }
#cluetip-close img {  border: 0; }
#cluetip-title { overflow: hidden; }
#cluetip-title #cluetip-close { float: right; position: relative; }
#cluetip-waitimage { width: 43px; height: 11px; position: absolute; background-image: url(wait.gif); }
.cluetip-arrows { display: none; position: absolute; top: 0; left: -11px; height: 22px; width: 11px; background-repeat: no-repeat; background-position: 0 0; }
#cluetip-extra { display: none; }

/***************************************
   =cluetipClass: 'default' 
-------------------------------------- */

.cluetip-default { background-color: #d9d9c2; }
.cluetip-default #cluetip-outer { position: relative; margin: 0; background-color: #d9d9c2; }
.cluetip-default h3#cluetip-title { margin: 0 0 5px; padding: 8px 10px 4px; font-size: 1.1em; font-weight: normal; background-color: #87876a; color: #fff; }
.cluetip-default #cluetip-title a { color: #d9d9c2; font-size: 0.95em; }  
.cluetip-default #cluetip-inner { padding: 10px; }
.cluetip-default div#cluetip-close {  text-align: right; margin: 0 5px 5px; color: #900; }

/* default arrows */

.clue-right-default .cluetip-arrows { background-image: url(../images/ctip_darrowleft.gif); }
.clue-left-default .cluetip-arrows { background-image: url(../images/ctip_darrowright.gif); left: 100%; margin-right: -11px; }
.clue-top-default .cluetip-arrows { background-image: url(../images/ctip_darrowdown.gif); top: 100%; left: 50%; margin-left: -11px; height: 11px; width: 22px; }
.clue-bottom-default .cluetip-arrows { background-image: url(../images/ctip_darrowup.gif); top: -11px; left: 50%; margin-left: -11px; height: 11px; width: 22px; }

/***************************************
   =cluetipClass: 'jtip'
-------------------------------------- */
.cluetip-jtip { background-color: transparent; }
.cluetip-jtip #cluetip-outer { border: 2px solid #ccc; position: relative; background-color: #fff; }
.cluetip-jtip h3#cluetip-title { margin: 0 0 5px; padding: 2px 5px; font-size: 16px; font-weight: normal; background-color: #ccc; color: #333; }
.cluetip-jtip #cluetip-inner { padding: 5px; display: inline-block; }
.cluetip-jtip div#cluetip-close { text-align: right; margin: 0 5px 5px; color: #900; }

/* jtip arrows */

.clue-right-jtip .cluetip-arrows { background-image: url(../images/ctip_arrowleft.gif); }
.clue-left-jtip .cluetip-arrows { background-image: url(../images/ctip_arrowright.gif); left: 100%; margin-right: -11px; }
.clue-top-jtip .cluetip-arrows { background-image: url(../images/ctip_arrowdown.gif); top: 100%; left: 50%; margin-left: -11px; height: 11px; width: 22px; }  
.clue-bottom-jtip .cluetip-arrows { background-image: url(../images/ctip_arrowup.gif); top: -11px; left: 50%; margin-left: -11px; height: 11px; width: 22px; }

/***************************************
   =cluetipClass: 'rounded'
-------------------------------------- */
.cluetip-rounded { background: transparent url(../images/ctip_bl.gif) no-repeat 0 100%; margin-top: 10px; margin-left: 12px; }
.cluetip-rounded #cluetip-outer { background: transparent url(../images/ctip_tl.gif) no-repeat 0 0; margin-top: -12px; }
.cluetip-rounded #cluetip-title { background-color: transparent; padding: 12px 12px 0; margin: 0 -12px 0 0; position: relative; }
.cluetip-rounded #cluetip-extra { position: absolute; display: block; background: transparent url(../images/ctip_tr.gif) no-repeat 100% 0; top: 0; right: 0; width: 12px; height: 30px; margin: -12px -12px 0 0; }
.cluetip-rounded #cluetip-inner { background: url(../images/ctip_br.gif) no-repeat 100% 100%; padding: 5px 12px 12px; margin: -18px -12px 0 0; position: relative; }
.cluetip-rounded div#cluetip-close {  text-align: right; margin: 0 5px 5px; color: #009; background: transparent; }
.cluetip-rounded div#cluetip-close a { color: #777; }

/* rounded arrows */
.clue-right-rounded .cluetip-arrows { background-image: url(../images/ctip_rarrowleft.gif); }
.clue-left-rounded .cluetip-arrows { background-image: url(../images/ctip_rarrowright.gif);  left: 100%; margin-left: 12px; }
.clue-top-rounded .cluetip-arrows { background-image: url(../images/ctip_rarrowdown.gif); top: 100%; left: 50%; margin-left: -11px; height: 11px; width: 22px; }  
.clue-bottom-rounded .cluetip-arrows { background-image: url(../images/ctip_rarrowup.gif); top: -23px; left: 50%; margin-left: -11px; height: 11px; width: 22px; }

/* stupid IE6 HasLayout hack */
.cluetip-rounded #cluetip-title, .cluetip-rounded #cluetip-inner { zoom: 1; }

/* div for important message (Grey)*/
div.notice { border: 1px solid #ccc; background: #eee; width: 100%; }
div.notice p { padding: 10px 15px; margin: 0; font-style: italic; font-size: 1.0em; line-height:19px; }
div.notice ul, div.notice ol { padding: 10px 30px; margin: 0; font-size: 1.0em; line-height:19px;}
div.notice table { padding: 10px 15px; margin: 5px 5px 0 30px; font-size: 1.0em; line-height:19px;}

/* div for important message (yellow)*/
div.warningmsg { border: 1px solid #ccc; background: #FEEFB3; width: 100%; color:#9F6000; margin-bottom:10px}
div.warningmsg h1 { padding: 5px 5px; margin: 0; font-weight:bold; font-size: 13px; color: Red}
div.warningmsg p { padding: 5px 10px; line-height:16px; margin: 0; font-style: italic; font-size: 11px; font-weight:bold;}
div.warningmsg ul, div.warningmsg ol { padding: 10px 15px; margin: 0; font-style: italic; font-size: 12px; }