html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
   border: 0;
   font-family: inherit;
   font-size: 100%;
   font-style: inherit;
   font-weight: inherit;
   margin: 0;
   padding: 0;
   vertical-align: baseline;
}

html, body
{
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
}

body
{
   background-color: #cccccc;
   background: url("../../../iclub/images/backgroundGradient.png") repeat-y;
   background-position: center;
   font-family: Arial, sans-serif;
   font-size: 80%;
   line-height: 16px;
}

a
{
   color: #000;
   cursor: pointer;
   text-decoration: underline;
}

a:hover
{
   color: #1e90ff;
   text-decoration: underline;
}

h2
{
   font-size: 175%;
   color: #000;
   padding: 10px 0 10px 0;
}

h2.pageCaption, h2#confirmation
{
   font-size: 190%;
   color: #000000;  /* setting to black to avoid forcing the club to choose a primary color that is good for text */
   margin: 0 0 10px 0;
}

h2.link
{
   cursor: pointer;
}

h3
{
   font-size: 140%;
}

h4
{
   font-size: 120%;
}

img.cardSwipe
{
   float: left;
   width: 50px;
}

img.checkImage
{
   position: absolute;
   bottom: 5px;
   right: 190px;
}

dt
{
   font-weight: bold;
   padding-top: 5px;
}

div#logoBox
{
   z-index: 20;
   position: absolute;
   top: 0;
   left: 0;
   background-color: white;
   width:  210px;
   margin-left: 60px;
   -moz-border-radius: 0px 0px 5px 5px;
   border-radius: 0px 0px 5px 5px;
}

div#logoBox div.logo
{
   cursor: pointer;
   width: 200px;
   height: 100px;
   margin-left: 5px;
   overflow: hidden;
   -moz-border-radius: 0px 0px 5px 5px;
   border-radius: 0px 0px 5px 5px;
}

div#defaultLogo div.logo
{
   background: url("../../../iclub/images/logo.png") no-repeat 2% 50%;
   height: 100px;
   width: 100%;
   padding: 5px;
}

div#logoBackground
{
   z-index: 11;
   position: absolute;
   top: 0;
   left: 0;
   background-image: url("../../../iclub/images/logoBackground.png");
   background-repeat: no-repeat;
   border: 0;
   width: 344px;
   height: 113px;
   vertical-align: top;
   text-align: center;
}

div#container
{
   width: 900px;
   min-height: 100%;
   position: relative;
   text-align: center;
   margin: 0px auto;
   background-color: white;
   border: 0;
}

div#content
{
   min-width: 870px;
   width: 870px;
   background-color: white;
   text-align: left;
   padding: 15px;
   padding-bottom: 100px;   /* Height of the footer */
}

div#footerContent
{
   padding-top: 15px;
}

#footer
{
   width: 900px;
   vertical-align: top;
   text-align: center;
   position: absolute;
   bottom: 0;
}

#footerLinks
{
   width: 45%;
   float: right;
   font-size: .7em;
   text-align: right;
   margin-right: 3px;
}

#footerSeals
{
   width: 45%;
   float: left;
}

.horizontal
{
   list-style: none;
}

img#closeErrors
{
   cursor: pointer;
   position: absolute;
   top: 5px;
   right: 5px;
}

.errorIcon
{
   vertical-align: middle;
   width: 22px;
   height: 22px;
}

.serverMessage
{
   vertical-align: middle;
}

#formContainer
{
   position: relative;
   margin-top: 25px;
}

#dues
{
   width: 400px;
   position: absolute;
   top: 0;
   right: 0;
   border: 1px solid lightgray;
   border-radius: 5px;
   -moz-border-radius: 5px;
   background-color: white;
   z-index: 10;
}

#duesContent
{
   padding: 5px;
}

#dueToday, #dueRecurring, #dueFees
{
   margin-bottom: 25px;
}

table.duesTable
{
   width: 100%;
   font-size: 0.9em;
}

table.duesTable tr.colTitles
{
   font-weight: bold;
}

table.duesTable tr td
{
   text-align: right;
}

#veriSignContainer
{
   margin-top: 30px;
   display: inline;
   width: 100%;
}

#header
{
   position: relative;
   background-color: white;
   width: 900px;
   height: 90px;
   margin: 0 auto;
   margin-bottom: 20px;
}

#formContainer h3
{
   color: #333;
   margin: 10px 0px 5px 0px;
}

#formContainer p
{
   margin-top: 5px;
}

input[type="text"], select, input[type="password"]
{
   background-color: white;
   border: solid 1px #ccc;
   font-family: Arial, sans-serif;
   font-size: 100%;
   color: black;
}

label
{
   font-size: .9em;
   font-weight: normal;
   display: block;
}

div#container
{
   width: 900px;
   min-height: 100%;
   position: relative;
   text-align: center;
   margin: 0px auto;
   background-color: white;
   border: 0;
}

div#content
{
   min-width: 870px;
   width: 870px;
   background-color: white;
   text-align: left;
   padding: 15px;
   padding-bottom: 100px;   /* Height of the footer */
}

div#footerContent
{
   padding-top: 15px;
}

div.fields
{
   -moz-border-radius: 5px;
   border-radius: 5px;
   border: none;
   margin-bottom: 25px;
}

div.field
{
   margin: 10px 5px 5px 5px;
   vertical-align: top;
   height: 100%;
}

div.inlineFields
{
   margin: 5px 0 5px 0;
   vertical-align: top;
   height: 100%;
   display: block;
}

.inlineFields div.field
{
   display: inline-block;
}

.inlineFields span.status
{
   display: block;
   padding-left: 2%;
   width: 100%;
}

.state
{
   width: 150px;
}

div.field.phone
{
   width: 110px;
}

div.ccExpMonth
{
   width: 120px;
}

div.ccExpYear
{
   width: 120px;
}

.error
{
   color: #dc143c;
   font-size: .9em;
   font-weight: normal;
}

.note
{
   font-size: .9em;
}

.smallPrint
{
   font-size: .85em;
}

.success.requiredIfVisible
{
   padding-left: 8px;
   background: url("../../../iclub/images/rightArrowGreen.png") no-repeat 1% 50%;
   background-color: white;
}

.requiredIndicator
{
   color: #dc143c;
   background: url("../../../iclub/images/rightArrowRed.gif") no-repeat 1% 50%;
   padding-left: 10px;
}

.requiredIndicator img
{
   margin-right: 7px;
}

input.requiredIfVisible
{
   /*IE hack to make the text NOT show up over the required arrow.*/
   height: 16px;
}

.requiredIfVisible
{
   padding-left: 8px;
   background: url("../../../iclub/images/rightArrowRed.gif") no-repeat 1% 50%;
}

input
{
   margin: 0;
}

select.requiredSelect
{
   margin: 0;
   color: #000;
   font-family: Arial, sans-serif;
   font-size: 100%;
   padding-left: 10px;
}

img.requiredSelect
{
   padding: 0;
   position: absolute;
   margin-top: 7px;
   margin-left: 2px;
}

input[type="radio"].requiredIfVisible
{
   margin-left: 15px;
}

.parentheses
{
   font-size: 0.8em;
   color: #555;
}

input.checkbox
{
   position: relative;
   top: -1px;
   margin: 0 5px 0 0;
   padding: 0;
   vertical-align: bottom;
}

label.checkbox
{
   font-size: 110%;
   display: inline;
}

input.zip
{
   width: 80px;
}

input.phone
{
   width: 100px;
}

input.middleInitial
{
   width: 20px;
}

input.phoneExt, input.expDate
{
   width: 50px;
}

input.creditCardNumber
{
   width: 140px;
}

#billingPaymentSection
{
   margin-left: 20px;
}

img.print
{
   height: 20px;
   margin-right: 10px;
}

img.check
{
   height: 16px;
   width: 16px;
   margin-right: 5px;
}

#status
{
   float: right;
   text-align: right;
   background-color: #eeeeee;
   margin-top: -100px;
   padding: 5px;
}

#status span
{
   vertical-align: baseline;
   white-space: nowrap;
   background-color: transparent;
   margin: 0;
   padding: 3px;
}

#headerBackground
{
   background-color: white;
   position: absolute;
   top: 0;
   height: 58px;
   width: 100%;
   margin: 0;
   border: 0;
}

.serverMessage
{
   vertical-align: middle;
}

.errors
{
   width: 900px;
   text-align: center;
   vertical-align: top;
   margin: 0 auto;
   background-color: white;
   border: 0;
   border-right: solid 1px #bbb;
   border-left: solid 1px #bbb;
}

#errorBox
{
   position: relative;
   background-color: white;
   width: 865px;
   padding: 5px 10px 0px 15px;
   text-align: left;
   margin: 18px 0 5px 0;
}

.errorBoxCaption
{
   font-size: 1.4em;
}

table.duesTable tr td hr
{
   margin: 0;
}

hr
{
   color: #999;
   background-color: #999;
   height: 1px;
   border: none;
}

form.buttons
{
   display: inline;
}

.dataConfirmation table, .dataConfirmation span
{
   margin: 10px;
}

.dataConfirmation th, .dataConfirmation td
{
   margin: 0;
   padding: 5px;
   text-align: left;
}

.dataConfirmation td
{
   font-weight: 700;
}

div.confirmMessages
{
   margin-top: 10px;
}

.completed
{
   display: inline-block;
   width: 27%;
   height: 100%;
   margin: 25px 40px 25px 0;
   vertical-align: top;
   align: left;
}

ul, dl
{
   margin-left: 20px;
}

#plansTable
{
   width: 100%;
   margin-top: 25px;
}

#plansTable tr td.planName
{
   vertical-align: middle;
   cursor: pointer;
   font-size: 155%;
   color: #000000;  /* setting to black to avoid forcing the club to choose a primary color that is good for text */
}

#plansTable tr td.planButtonCell
{
   padding: 5px 0 5px 0;
   text-align: right;
}

#plansTable tr.planDescription td
{
   padding: 15px 15px 25px 15px;
}

#plansTable tr.selectPlanRow
{
   cursor: pointer;
}

div.email
{
   width: 160px;
}

div.zip
{
   width: 100px;
}

.datePickerDob
{
   width: 75px;
}

.paymentSection
{
   position: relative;
   background-color: #f2f2f2;
}

textarea#storyText
{
   resize: none;
   width: 300px;
   height: 80px;
}

div#facebookConnect
{
   margin-top: -20px;
   float: right;
   border: 1px solid #ccc;
   -moz-border-radius: 5px 5px 5px 5px;
   border-radius: 5px 5px 5px 5px;
}

div.facebookText
{
   margin: 0 5px 0px 5px
}

h3.facebookConnectCaption
{
   font-size: 1.1em;
   font-weight: bold;
   color: #494949;
   margin: 0 15px 1px 15px;
}

img.facebookStoryIcon
{
   float: left;
   width: 25px;
   margin: -4px 5px -4px -8px;
}

img.facebookLogo
{
   height: 51px;
   float: left;
}

div#facebookPublish, div.facebookStory
{
   background-color: white;
}

.facebookStoryContent
{
   width: 300px;
   float: right;
}

.facebookStoryCaption
{
   font-size: .9em;
   color: #bbb;
}


a.facebookLink
{
   font-size: 12px;
   color: #3B5998;
   text-decoration: none;
}

a.facebookLink:hover
{
   color: #3B5998;
   text-decoration: underline;
}

.facebookLink
{
   font-size: 1.0em;
   color: #3B5998;
   font-weight: bold;
}


img.facebookStoryClubImage
{
   margin-top: 15px;
   width: 100px;
}

div#facebookPromoContainer
{
   margin-top: -28px;
   float: right;
}

.ui-datepicker-trigger
{
   margin-left: 3px;
   height: 19px;
   width: 19px;
   vertical-align: top;
}

#footer
{
   width: 900px;
   vertical-align: top;
   text-align: center;
   position: absolute;
   bottom: 0;
}

#footerLinks
{
   width: 45%;
   float: right;
   font-size: .7em;
   text-align: right;
   margin-right: 3px;
}

#footerSeals
{
   width: 45%;
   float: left;
}

.horizontal
{
   list-style: none;
}

.horizontal li, .horizontal dd
{
   display: inline;
}

.clubName
{
   padding: 0;
   margin-bottom: 5px;
}

img.shortHr
{
   margin: 0;
   width: 180px;
}

dl.clubContact
{
   margin: 2px 0 4px 0;
   padding-top: 5px;
}

.contact
{
   margin-left: 20px;
}

.notice
{
   margin-top: 10px;
   font-size: .9em;
}

div.agreementNotes, div.termsAndConditions
{
   font-size: .85em;
   text-align: left;
   margin-left: 5px;
}

div.termsAndConditions
{
   height: 150px;
   overflow-x: hidden;
   overflow-y: auto;
}

div#printContent
{
   display: none;
}

.ui-datepicker
{
   display:none; /*To prevent empty space under footer after div append by jquery */
}

.steps
{
   position: absolute;
   top: 25px;
   right: 0px;
   text-align: right;
   padding: 10px 5px 0px 5px;
   font-weight: bold;
}

.step
{
   height: 30px;
   text-align: right;
   padding: 5px 10px 5px 25px;
}


.ui-effects-wrapper
{
   display: inline;
}

.set
{
   display: none;
   color: #009933;
   font-size: 1.6em;
}

h1.attention
{
   text-align: center;
   font-size: 230%;
   color: #dc143c;
}

h3.error
{
   text-align: center;
   font-size: 180%;
   margin-top: 15px;
   color: #dc143c;
}

div.ccNumber
{
   width: 150px;
}

div.cvv
{
   width: 70px;
}

div.routingNumber
{
   width: 130px;
}

input.cvv
{
   width: 60px;
}

input.routingNumber
{
   width: 120px;
}

<%--JQUERY UI Modifications--%>

.ui-dialog .ui-dialog-buttonpane
{
   padding:5px;
}

.ui-dialog .ui-dialog-buttonpane BUTTON
{
   margin: .2em;
}

form
{
   display: inline;
}

span.billingPaymentMode, span.dueTodayPaymentMode
{
   cursor: default;
   margin: 0 20px 0 5px;
}

.modal
{
   z-index: 10001;
}

.promoContainer
{
   float: right;
}

.promoContainer div.field
{
   margin-top:5px;

}

.promoMessage
{
   margin-top: 10px;
}

.promotionTitle
{
   font-size: 1.6em;
   color: #009933;
   font-weight: bold;
}
.promoMessage
{
   color: #009933;
}

#help
{
   position: absolute;
   top: 75px;
   right: 10px;
   cursor: pointer;
   border: solid 1px red;
   background: url("../../../iclub/images/help.png");
}

.dropMenu
{
    z-index: 10000;
    background-color: white;
    border: 1px solid lightgray;
    min-width: 150px;
    width: 150px;
    padding: 10px 10px 10px 10px;
    position: absolute;
    text-align: left;
    display: none;
}

#helplink
{
   position: absolute;
   top: 72px;
   right: 5px;
}

.alternateActionLinks
{
   margin-left: 10px;

}

.alternateActionLinks a
{
   padding: 0 10px 0 10px;
   border-left: 1px solid #ddd;
}

span.Information, span.Warning, span.Error
{
   display: inline-block;
   padding: 5px 0 5px 3px;
   margin: 5px 0 0 0;
   border-radius: 13px;
   -moz-border-radius: 13px;
   vertical-align: middle;
   font-size: 1.1em;
   width: 100%;
   background-image: url('../../../iclub/images/barGradient.png');
}

span.Information
{
   background-color: #90ee90;
   color: #228b22;
   border: 1px solid #228b22;
}

span.Warning
{
   background-color: #ffff88;
   color: #a98929;
   border: 1px solid #a98929;
}

span.Error
{
   background-color: #f07070;
   color: maroon;
   border: 1px solid maroon; 
}

.hideErrors
{
   margin-top: 0;
   float: right;
   cursor: pointer;
   text-decoration: underline;
   color: #999;
   font-size: .8em;
}

a.show-hidden, a.show-plain
{
   font-size: .8em;
}

div.accountNumber
{
   width: 150px;
}