* #Reset & Basics (Inspired by E. Meyers)
================================================== */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
         }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block; }
    body {
        line-height: 1; }
    ol, ul {
        list-style: none; }
    blockquote, q {
        quotes: none; }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none; }
    table {
        border-collapse: collapse;
        border-spacing: 0; }



.container,
.half,
.col-1-4,
.col-3-4{
    -moz-transition: width 0.3s;
    -webkit-transition: width 0.3s;
    transition: width 0.3s;
}


img,
embed,
video{
    max-width: 100%;
    height: auto;
}

/* #Basic Styles
================================================== */
    body {
        background: url(../images/polaroid.png) fixed #DFE8EF;
        font: 12px/19px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #444;
        -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
        -webkit-text-size-adjust: 100%;
 }


hr{
    margin: 20px 0;
    clear: both;
    border: 0 none;
    outline: none;
    height: 1px;
    background: #dfe8ee;
}



/* #Typography
================================================== */
    h1, h2, h3, h4, h5, h6 {
        color: #333;
        font-family: "Hammersmith One", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 400;
        clear: both;
        float: none;
    }
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
    h1 { font-size: 32px; line-height: 1.1em; margin-bottom: .2em;}
    h2 { font-size: 26px; line-height: 1.1em; margin-bottom: .2em;}
    h3 { font-size: 23px; line-height: 1.1em; margin-bottom: .2em;}
    h4 { font-size: 20px; line-height: 1.1em; margin-bottom: .2em;}
    h5 { font-size: 17px; line-height: 1.1em; margin-bottom: .2em;}
    h6 { font-size: 14px; line-height: 1.1em; margin: 0 0 .2em 0;}
    .subheader { color: #777; }

    p { margin: 0 0 .5em 0; }
    p img { margin: 0; }
    p.lead { font-size: 21px; line-height: 27px; color: #777;  }

    em { font-style: italic; }
    strong { font-weight: bold;  }
    small { font-size: 80%; }



ol,
ul,
ol li, 
ul li{
    margin: 0;
    padding:0;
}

.container{
    max-width: 960px;
    margin:0 auto 20px;
    padding: 0 20px;

    background: white;
    background: rgba(255,255,255,0.75);
}
.container.form-wrap{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);

    position: relative;
    z-index: 2;

    padding-bottom: 20px;

}
    


header.container,
footer.container{
    padding: 0;
    margin: 0 auto;
    background: 0 none;
}
header.container{
    padding: 10px;
    position: relative;
    
   /* background: transparent url( ../images/mags.png ) right top no-repeat;*/
}
    header.container:after{
        background: url("../images/mags.png") no-repeat scroll 0 0 transparent;
        bottom: 0;
        content: "";
        display: block;
        height: 242px;
        position: absolute;
        right: -1px;
        visibility: visible;
        width: 270px;
        z-index: 1;
    }
    header h1{
        position: relative;
        color: #004268;
        text-shadow: 1px 1px 0px #fff;
        -moz-text-shadow: 1px 1px 0px #fff;
        -webkit-text-shadow: 1px 1px 0px #fff;
        letter-spacing: -2px;
        z-index: 10;
    }
    header p{
        background: #fff;
        background: rgba(255,255,255,0.5);
        margin: 10px 0 0 0;
        padding: 10px;
        position: relative;
        font-size: 16px;
        color: #004268;
        width: 75%;
        
        text-shadow: 1px 1px 0px #fff;        
        -moz-text-shadow: 1px 1px 0px #fff;
        -webkit-text-shadow: 1px 1px 0px #fff;
        
        margin-bottom: 1em;
        z-index: 10;

        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }
    header img.mags{
        max-width: 100%;
    }

.alignleft{ float: left;}
.alignright{ float: right;}
.container.terms-wrap{
    
}

.got-questions{
    background: #E7F5F8;
    display: block;
    font-size: 14px;
    padding: 10px;
    margin: 0 20px 0 0;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
}

ol{
    list-style: decimal;
    margin: 0;
    padding: 0;
}
    ol li{
        margin: .5em 0 .25em 2em;
    }
ol ul{
    margin:0;
    padding:0;
}
    ol ul li{
        margin: 0 0 .25em 2em;
        list-style: lower-alpha;
    }


.show-publication-details,
.bank-links li{
    position: relative;
    line-height: 16px;
    padding-left: 5px;    
}
h5.show-publication-details{ color: #fff; margin: 5px 0 5px 12px; font-weight: 400; }
h5.show-publication-details b{ font-weight: 400; }

.show-publication-details:before,
.bank-links li:before{
    content: '?';
    position: absolute;
    left: -16px;
    width: 16px;
    height: 16px;
    background: #bada55;
    color: #fff;
    text-align: center;
    line-height: 16px;
    font-weight: bold;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
}

/* #Form
================================================== */

.success-msg{
    padding: 47px 20px 20px;
    /*background: #ecffe0;*/
    margin: 0 20px 10px;

    /*-moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;*/

    /*box-shadow: 0px -2px 2px rgba(0,0,0,0.3) inset;
    -moz-box-shadow: 0px -2px 2px rgba(0,0,0,0.3) inset;
    -webkit-box-shadow: 0px -2px 2px rgba(0,0,0,0.3) inset;*/
}
.error-msg{
    padding: 20px 0;
    background: #ffe4e0;
    padding: 20px;
    margin: 0 20px 10px;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    box-shadow: 0px -2px 2px rgba(0,0,0,0.3) inset;
    -moz-box-shadow: 0px -2px 2px rgba(0,0,0,0.3) inset;
    -webkit-box-shadow: 0px -2px 2px rgba(0,0,0,0.3) inset;
}
    .success-msg h1,
    .error-msg h1{ 
        margin: 0 0 0.2em;
    }

form {
    padding: 10px;
    border: 0 none;
}
    form li h4{margin: 0 0 1em 0;}

    form ul li{
        margin: 10px;
        padding: 5px;
        clear: both;
    }

    label{
        display: inline-block;
        min-width: 120px;
        clear: left;
    }
    .half .long-desc,
    .col-1-4 .long-desc,
    .col-3-4 .long-desc,
    .long-desc{
        width: 75%;
        vertical-align: top;
        margin-left: 10px;
    }
    .important{
        background: #004268;
        color: #fff;
        -moz-border-radius: 5px;
        padding: 20px 0 20px 20px;
        -webkit-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }
    .important.authwrap{
        color: #fff;
    }

    :invalid {
      /*border: 1px solid #ff0000;*/
    }
    .hpot{ 
        visibility:hidden; 
        height: 0; 
        padding: 0; 
        margin: 0;
    }
    .col-1-4{ 
        width: 20%;
    }
    .col-3-4{ 
        width: 70%;
    }
    .half{ 
        width: 45%;
    }
    .left{ 
        float: left; 
        clear: left;
    }
    .right{ 
        float: right; 
        clear: right;
    }

    .left label,
    .right label{ 
        width: 30%;
    }

    .left input,
    .right input{ 
        width: 65%;
    }

    form ul li span,
    form ul li span{
        display: block;
        margin: 0 0 10px;
    }



    select{max-width: 90%;}

    .recipient-details label{
        width: 38%;
    }

    select option{ padding:2px 0 2px 5px!important;}
    input{width: 30%;}
    input.length2{ width: 2em; }
    input.length3{ width: 3em; }
    input.length4{ width: 4em; }
    input.length5{ width: 5em; }
    input.length6{ width: 6em; }
    input.length7{ width: 7em; }
    input.length8{ width: 8em; }
    input.length9{ width: 9em; }
    input.length10{ width: 10em; }
    input.length11{ width: 11em; }
    input.length12{ width: 12em; }
    input.length13{ width: 13em; }
    input.length14{ width: 14em; }
    input.length15{ width: 15em; }
    input.length16{ width: 16em; } 

    input.error{ border: 1px solid red !important;}
    
    label.error{ 
        background: none repeat scroll 0 0 white;
        border: 1px dotted #FF0000;
        color: red;
        display: inline-block;
        margin: 2px 0 10px 2px;
        width: auto;
    }
    .half label.error{ 
        margin-left: 130px;

    }




    @media only screen and (max-width: 800px) {
        .container { width: 600px; }
        .left,
        .right{ 
            float: none; 
            clear: none;
            width: 100%;
        }
        select{width: 100%;}
        
    }


    @media only screen and (max-width: 600px) {
        .container { width: 400px; }
        .half,
        .col-1-4,
        .col-3-4,
        .half label,
        .half input{ width: 95%; float: none;}
        .half label.error{ 
            margin-left: 2px;

        } 
        select{width: 95%;}

        header.container:after{
            visibility: hidden;
        }
        
    }


    @media only screen and (max-width: 400px) {
        .container { width: 280px; padding: 0px; }
        .half,
        .col-1-4,
        .col-3-4,
        .half label,
        .half input{ width: 95%; float: none;}
        .half label.error{ 
            margin-left: 2px;

        } 
        select{width: 95%;}

        header.container:after{
            visibility: hidden;
        }
        
    }

        /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }