/* -------------------  GLOBAL FORM ELEMENTS -------------------- */

label {display:block;font-size:13px;text-align:left; color: #333333; font-family: Georgia,"Times New Roman",Times,serif; font-weight: bold; line-height: 100%; margin: 15px 0 5px;}
select, textarea{background-color:#FFFFFF;border: 1px solid #CCCCCC;line-height:140%;}
select {padding:5px;}
textarea{padding:10px;}
.alert{ background-color:#cc0000; padding:15px; color:#FFFFFF; font-size:16px; text-align:center; font-weight:bold; margin-bottom:15px;}
p.alertMessage {font-size:18px; color:#cc0000;}
/*----- input button ------*/

button { border:0; cursor:pointer; padding:0 11px 0 0; text-align:center; outline:none;}
button span { display:block; padding:0 0 0 14px; }
button {background-image: url(/img/buttons/input_Button_Right.png);background-repeat: no-repeat;
        background-position: right;background-color: transparent;}
button span { height:38px; line-height:38px;background: url(/img/buttons/input_Button_Left.png) left no-repeat;color:#ffffff; font-weight:bold; font-family:Tahoma, Arial; text-transform:uppercase; font-size:14px; white-space:nowrap}
button:hover span {color: #f8cccc;}
/*button:hover {background: url(/img/buttons/input_Button_Right_Hover.png) right no-repeat; }
button:hover span {background:url(/img/buttons/input_Button_Left_Hover.png) left no-repeat; }
*/

/* -------------------  Contact FORM -------------------- */

.contactForm {background: none repeat scroll 0 0 transparent;
              border: medium none;
              margin-top: 15px;
              padding: 0;}


.contactForm .holder {width:300px;}
.contactForm .holderFull {width: 627px;}
.contactForm .holderFull.new {
    display: table;
}
.contactForm input {
    background:url(/img/forms/inputBgrd.png) left top no-repeat;
    border: medium none;
    padding: 10px 10px;
    margin:0;
    width: 290px;}
.contactForm .holderFull input {width: 607px; background-image: url(/img/forms/inputBgrdFull.png)}
.contactForm .holderRadio input {width: 20px;} 


.contactForm textarea {height:142px;margin:0 0 15px; background:url(/img/forms/textareaBgrd.png) left top no-repeat; border:none;
                       padding: 11px 10px;
                       position: relative;
                       width: 607px;}

.contactForm .holderButton { width: 627px;}
.contactForm .holder select, .contactForm .holderFull select {background:url(/img/forms/selectBgrd.png) left top no-repeat; border: medium none; height: 41px; padding: 10px 10px; width: 627px; margin-bottom:15px;}
.contactForm .holder select option, .contactForm .holderFull select option {background-color:#FFFFFF; padding:2px;}
.contactForm input.required {}
.contactForm textarea.required {}

/* -------------------  Login FORM -------------------- */

.loginForm {width:627px;}
.loginForm .holder {width:627px; margin-bottom:10px}
.loginForm label {width: 300px; float:left; display:block; font-weight:bold; margin-top:15px;}
.loginForm input { background: url("/img/forms/inputBgrd.png") no-repeat scroll left top transparent; border: medium none; color: #333333; margin: 0 0 5px;
                   padding: 13px 10px; width: 290px; float:right;}

/* -------------------  Activation FORM -------------------- */

.activationForm {width:625px;}
.activationForm .holder {width:625px; margin-bottom:10px}
.activationForm label {width: 290px; float:left; display:block; font-weight:bold;margin-top:15px;}
.activationForm input {background: url("/img/forms/inputBgrd.png") no-repeat scroll left top transparent; border: medium none; color: #333333; margin: 0 0 5px; padding: 13px 10px; width: 290px; float:left;}
.activationForm input.submit { background:url(/img/forms/input_act.png) left center no-repeat;  cursor: pointer; float: right; width: 200px; font-family: Tahoma, Arial; color: #ffffff; font-weight: bold; margin-right:25px; text-transform:uppercase; font-size:14px; padding:0; height:39px; line-height:39px; margin-bottom:0; font-style:normal;}
.activationForm input.submit:hover {color:#FFFFFF;}
.activationForm .holder span {color: #CC0000;}

/* -------------------  Sign in FORM -------------------- */
.signUpForm input {background: url(/img/forms/input627.png) left top no-repeat;  width: 607px;}


/* -------------------  Registration FORM -------------------- */

.registrationForm {width:627px;}
.registrationForm .holder {width:627px; margin-bottom:10px}
.registrationForm label {width: 300px; float:left; display:block; font-weight:bold;margin-top:15px;}
.registrationForm input {background: url("/img/forms/inputBgrd.png") no-repeat scroll left top transparent; border: medium none; color: #333333; margin: 0 0 5px; padding: 13px 10px; width: 290px; float:right;}
.registrationForm select {width:292px;margin:5px 0 8px;}

/* -------------------  Password Recovery FORM -------------------- */

.passwordRecoveryForm {width:627px;}
.passwordRecoveryForm .holder {width:627px; margin-bottom:10px}
.passwordRecoveryForm label {width: 300px; float:left; display:block; font-weight:bold;margin-top:15px;}
.passwordRecoveryForm input {background: url("/img/forms/inputBgrd.png") no-repeat scroll left top transparent; border: medium none; color: #333333; margin: 0 0 5px; padding: 13px 10px; width: 290px; float:right;}

/* -------------------  Password Change FORM -------------------- */

.changePasswordForm {width:627px;}
.changePasswordForm h3 {background:url(/img/slidingDoor/slidingDoor_border.gif) repeat-x left bottom;display:block;padding-bottom:15px;}
.changePasswordForm .holder {width:627px; margin-bottom:10px}
.changePasswordForm label {width: 300px; float:left; display:block; font-weight:bold;margin-top:15px;}
.changePasswordForm input {background: url("/img/forms/inputBgrd.png") no-repeat scroll left top transparent; border: medium none; color: #333333; margin: 0 0 5px; padding: 13px 10px; width: 290px; float:right;}
.changePasswordForm select {width:302px;margin:5px 0 8px;}

/* -------------------  User Data FORM -------------------- */

.userDataForm {width:627px}
.userDataForm .holder {width:627px; margin-bottom:10px}
.userDataForm .holderGroup {width:627px;padding:10px 0;}
.userDataForm .holderGroup h3 {background:url(/img/slidingDoor/slidingDoor_border.gif) repeat-x left bottom;display:block;padding-bottom:15px;}
.userDataForm label {width: 300px; float:left; display:block; font-weight:bold;margin-top:15px;}
.userDataForm input {background: url("/img/forms/inputBgrd.png") no-repeat scroll left top transparent; border: medium none; color: #333333; margin: 0 0 5px; padding: 13px 10px; width: 290px; float:right;}

/* -------------------  Blog Edit FORM -------------------- */

.blogEdit {width:627px; margin-bottom:20px;}
.blogEdit .holder {width:627px;}
.blogEdit label {}
.blogEdit input {border: medium none; color: #666666; margin: 0 0 15px; padding: 13px 10px;  background: url("/img/forms/input627.png") no-repeat scroll left top transparent; width: 607px;}

/* -------------------  Blog Post Edit FORM -------------------- */

.blogPostForm {width:627px; margin-bottom:20px;}
.blogPostForm .holder {width:627px;}
.blogPostForm .holderCheckBox {margin-top:15px;}
.blogPostForm label {display:block}
.blogPostForm label.example1 {display:block; float:left}
.blogPostForm input {border: medium none; color: #666666; margin: 0 0 15px; padding: 13px 10px;  background: url("/img/forms/input627.png") no-repeat scroll left top transparent; width: 607px;}
.blogPostForm input.checkbox{width:auto;margin-left:10px; }
.blogPostForm textarea {  background: url("/img/forms/textareaBgrd.png") no-repeat scroll left top transparent; border: medium none; height: 142px;   margin: 0 0 15px; padding: 15px 10px; width: 607px;}

/* -------------------  Change Avatar FORM -------------------- */

.changeAvatar {width:625px}
.changeAvatar .holder {width:625px; margin-bottom:15px}
.changeAvatar input.butAct {width:100px;margin:0px;background-color:#FFFFFF;color:#333333;height:35px;padding: 0px; background: url(/img/buttons/avatarButtons.gif) no-repeat;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;cursor: pointer;font-size: 11px;}
.changeAvatar input.avatar {background: url("/img/forms/inputBgrd.png") no-repeat scroll left top transparent; border: medium none; color: #333333; margin: 0 0 5px; padding: 13px 10px; width: 290px; }
.changeAvatar input.submitButton{border:none; color:#ffffff; font-family: Tahoma,Arial; font-weight: bold; font-size:14px; background:url(/img/buttons/buttonSubmit.png) center top no-repeat; width:108px; height:38px; display:block; line-height:38px; text-transform:uppercase; cursor:pointer; font-style:normal;}

/* -------------------  Mail Friend FORM -------------------- */

#mailFriend {width:310px; margin:0 auto;}
#mailFriend .holder label{ color:#666; font-size:12px}
#mailFriend .holder input{ background: url("/img/forms/inputBgrd.png") no-repeat scroll left top transparent; border: medium none; color: #333333; margin: 0 0 5px; padding: 13px 10px; width: 290px; float:right;}
#mailFriend .holder button{ }
#mailFriend .mailFriendTop{ color:#FF0000; margin-bottom:10px;}


/* -------------------  send Coment FORM -------------------- */

#formMessage{background-color:#cc0000; color:#FFFFFF; padding:10px; text-align:center; font-weight:bold; margin-bottom:20px;}
#sendCommentForm .holder{ width:310px;}
#sendCommentForm .holder2{ width:310px; margin:0 0 0 5px}
#sendCommentForm .holderButton{ width:605px; margin:0 0 0 20px}

#sendCommentForm{margin-top:15px; border:none; background:none;}
#sendCommentForm h2{ color: #333333; font-family: Tahoma,Arial; font-size: 26px; font-weight: bold; text-transform:uppercase;}

#sendCommentForm input{}
#sendCommentForm textarea{}

/* -------------------  Search Story FORM -------------------- */

#searchStoryForm{ padding:5px 10px}
#searchStoryForm .holder{ width:274px; margin-bottom:5px}
#searchStoryForm .holderHalf{ width:115px; position: relative;}
#searchStoryForm .first{margin:0 68px 5px 0;}
#searchStoryForm .last{ margin:0 0 5px -25px;}
#searchStoryForm a{ position:absolute; top:32px; right:-15px}
#searchStoryForm label{ font-weight:bold}
#searchStoryForm input{border:1px solid #000; -moz-border-radius: 7px; -webkit-border-radius: 7px;  -khtml-border-radius:7px; border-radius: 7px; behavior: url(/js/PIE.htc); padding:0; position:relative; padding:10px; color:#000000; width:100%; font-size:11px;}
#searchStoryForm input{
    background-image: linear-gradient(bottom, #BDECFA 35%, #FFFFFF 68%);
    background-image: -o-linear-gradient(bottom, #BDECFA 35%, #FFFFFF 68%);
    background-image: -moz-linear-gradient(bottom, #BDECFA 35%, #FFFFFF 68%);
    background-image: -webkit-linear-gradient(bottom, #BDECFA 35%, #FFFFFF 68%);
    background-image: -ms-linear-gradient(bottom, #BDECFA 35%, #FFFFFF 68%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.35, #BDECFA),
        color-stop(0.68, #FFFFFF)
        );
    behavior: url(/js/PIE.htc);
}
#searchStoryForm select{border:1px solid #000; -moz-border-radius: 7px; -webkit-border-radius: 7px;  -khtml-border-radius:7px; border-radius: 7px; behavior: url(/js/PIE.htc); padding:0; position:relative; padding:10px; color:#000000; width:294px}
#searchStoryForm select{
    background-image: linear-gradient(bottom, #BDECFA 35%, #FFFFFF 68%);
    background-image: -o-linear-gradient(bottom, #BDECFA 35%, #FFFFFF 68%);
    background-image: -moz-linear-gradient(bottom, #BDECFA 35%, #FFFFFF 68%);
    background-image: -webkit-linear-gradient(bottom, #BDECFA 35%, #FFFFFF 68%);
    background-image: -ms-linear-gradient(bottom, #BDECFA 35%, #FFFFFF 68%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.35, #BDECFA),
        color-stop(0.68, #FFFFFF)
        );
    behavior: url(/js/PIE.htc);
}
.holderButton{padding-top:5px; width: 294px; clear:both; text-align:center}
.searchRow2 .searchStoryForm button.searchButton{ }

/*--------------------  Newsletter Form ---------------------*/
.newsletterForm {width: 627px;}
.newsletterForm .holder {margin-bottom:10px;}
.newsletterForm label{  display: block; float: left; font-weight: bold; width: 300px;margin-top:15px;}
.newsletterForm  input { background: url("/img/forms/inputBgrd.png") no-repeat scroll left top transparent;
                         border: medium none;
                         color: #333333;
                         float: right;
                         margin: 0 0 5px;
                         padding: 13px 10px;
                         width: 290px;}

.holder3 {
    width: 130px;
    float: left;
    margin-right: 10px;
}
.holder3.first {
    clear: both;
}
.contactForm .holder3 input {
    width: 100%;
    box-sizing: border-box;
    background-size: 100% 100%;
    background: url(/img/forms/inputBgrdSmaller.png) left top no-repeat;
}
.customCheckbox {
    margin-top: 30px;
    display: block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: bold;
    color: #333333;
    font-family: Georgia,"Times New Roman",Times,serif;
    display: table;
}
.customCheckbox.bottom {
    margin: 5px 0 15px;
}
.customCheckbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.customCheckbox .checkmark {
    position: absolute;
    top: -2px;
    left: 0;
    height: 14px;
    width: 14px;
    background-color: #fff;
    border: 1px solid #D8D8D8;
}
/*.checkmarkHolder {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    width: 18px;
    height: 18px;
}*/
.customCheckbox:hover input ~ .checkmark {
    background-color: #F6F6F6;
}
.customCheckbox input:checked ~ .checkmark {
    background-color: #fff;
}
.customCheckbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the checkmark when checked */
.customCheckbox input:checked ~ .checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.customCheckbox .checkmark:after {
    left: 2px;
    top: 2px;
    width: 10px;
    height: 10px;
    background: #CC0000;
}
.customCheckbox.bottom input {
    width: 20px;
}
#payment button {
    margin-top: 30px;
}
.contactForm .holder select.halfSelect {
    width: 310px;
    background: url(/img/forms/selectBgrdNew.png) left top no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    line-height: 1;
}
#donation.contactForm .holder select.halfSelect {
    padding-right: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Georgia,"Times New Roman",Times,serif !important;
}
#donation.contactForm .holder select.halfSelect option {
    font-family: Georgia,"Times New Roman",Times,serif !important;
}
.newData .contactForm {
    width: 630px;
}
.requiredTxt {
    font-style: italic;
}
.requiredTxt.red{
    color: #CC0000;
}
a.button {
    cursor: pointer;
}
label {
    font-size: 18px;
}
.requiredTxt {
    font-size: 14px;
}
.required {
    border: 1px solid red !important; 
}
