﻿


BODY
{
display: block ;
padding: 0px ;
margin: 0px ;
background-color: rgba(145,0,75,1) ;
overflow-y: auto ;
}


BODY, TD, INPUT, SELECT, TEXTAREA
{
font-family: 'futura-pt', sans-serif, Calibri ; 
font-size: 14pt ;
font-weight: 400;
color: rgba(255,255,255,0.7);
}

DIV
{
display: block ;
margin: 0px ;
}


DIV, TD
{
text-align: left ;
vertical-align: top ;
}

IMG
{
border: none ;
}

HR
{
display: block ;
height: 1px ;
border: none ;
color: rgba(255,255,255,0.6) ;
background-color: rgba(255,255,255,0.4) ;
}

A, A:link, A:active, A:visited, A:hover
{
color: rgba(105,180,225,1);
border-bottom: 1px solid rgba(255,255,255,0);

text-decoration: none ;

transition-property: color, border-bottom ;
transition-duration: 300ms ;
}

A:hover
{
color: rgba(255,255,255,1) ;
border-bottom: 1px solid rgba(255,255,255,1);
}



A.aSmall, A:link.aSmall, A:active.aSmall, A:visited.aSmall, A:hover.aSmall
{
font-size: 11pt;
font-weight: 500;

color: rgba(255,255,255,0.7) ;
border-bottom: 1px solid rgba(255,255,255,0);

text-decoration: none ;

transition-property: color, border-bottom ;
transition-duration: 300ms ;
}

A.aSmall:hover
{
color: rgba(255,255,255,1) ;
border-bottom: 1px solid rgba(255,255,255,0);
}


.xs
{
font-size: 10pt;
font-weight: 400;
line-height: normal ;
}


P
{
margin-top: 0px ;
margin-bottom: 50px
}

P:last-of-type
{
margin-bottom: 0px
}

UL
{
list-style-type: square ;
}

OL
{
list-style-type: decimal-leading-zero ;
font-weight: bold ;
}

LI
{
font-weight: normal ;
}



H1, H2, H3, H4, H5, H6, H7
{
font-weight: 700 ;
margin-top: 0px ;
margin-bottom: 25px
}








H1
{
color: #ffffff ;
font-size: 26pt ;
font-weight: 400 ;
margin-bottom: 0px
}

H2
{
font-size: 16pt ;
font-weight: 500 ;
}

H3
{
font-size: 12pt ;
}

H4
{
font-size: 10pt ;
}

H5
{
font-size: 9pt ;
}


HEADER
{
background: rgba(0, 0, 0, 0.1);
padding: 50px 0px;
margin-bottom: 50px ;
}

SECTION
{
padding-top: 50px ;
}

SECTION.info
{
padding-top: 0px;
}


HEADER>DIV,
SECTION>DIV
{
width: 88% ;
max-width: 700px ;
margin-left: auto ;
margin-right: auto ;
}





.textSection 
{
}


.textSection P
{
line-height: 140% ;
margin-top: 0px ;
margin-bottom: 20px ;
}

.textSection H3
{
font-size: 18pt ;
margin-top: 60px ;
margin-bottom: 20px ;
}

.textSection H3:first-child
{
margin-top: 0px ;
}










/* FORM */




.form
{
display: table ;
}

.form_row
{
display: table-row ;
}

.form_label, .form_input
{
display: table-cell ;
}

.form_label, .label_row .form_input
{
text-align: left ;
padding-top: 6px ;
padding-right: 20px ;
font-size: 13pt ;
font-weight: 400 ;
}

.form_label
{
white-space: nowrap ;
width: 10% ;
min-width: 75px
}

.form_input
{
padding-bottom: 16px ;
width: 90% ;
}


.form_label .camolink
{
text-decoration: none ;
}




.space_row
{
height: 40px;
}
.space_row .form_label, .space_row .form_input
{
padding: 0px ;
margin: 0px ;
}






.label_row 
{
}

.label_row .form_input
{
text-align: left ;
padding-top: 30px ;
padding-bottom: 20px ;
}




.color_row
{
}

.color_row .form_input
{
background-color: rgba(255,255,255,0.15)  ; 
padding-left: 10px ;
padding-right: 10px ;
}







.divider_row
{
}

.divider_row .form_label, .divider_row .form_input
{
padding-top: 18px ;
padding-left: 0px ;
padding-right: 0px ;
padding-bottom: 32px ;
font-size: 0px ;
}




.hidden_row
{
    display: none ;
}

















/* INPUT */

:focus 
{
outline: none ;
}


INPUT, 
SELECT, 
TEXTAREA,
LABEL
{
padding-top: 0px ;
padding-left: 0px ;
padding-right: 0px ;
padding-bottom: 0px ;
font-size: 14pt ;
font-weight: 500 ;
color: #ffffff ;
}

INPUT[type="text"], 
INPUT[type="email"], 
INPUT[type="password"], 
input[type="date"],
TEXTAREA, 
SELECT
{
padding-left: 2% ;
padding-top: 8px ;
padding-bottom: 8px ;
border: rgba(255,255,255,0.4) solid 2px ;
background-color: rgba(145,0,75,1) ;
border-radius: 4px ;
width: 96% ;

transition-property: border ;
transition-duration: 300ms ;
}

INPUT[type="text"]:focus , 
INPUT[type="email"]:focus , 
INPUT[type="password"]:focus , 
INPUT[type="date"]:focus , 
TEXTAREA:focus , 
SELECT:focus 
{
border: rgba(255,255,255,0.8) solid 2px ;
}



TEXTAREA
{
font-size: 12pt ;
font-weight: 400 ;

scrollbar-face-color: #91004b ;
scrollbar-shadow-color: #91004b ;
scrollbar-highlight-color: #91004b ;
scrollbar-3dlight-color: #91004b ;
scrollbar-darkshadow-color: #91004b ;
scrollbar-track-color: #91004b ;
scrollbar-arrow-color: #bd6693 ; 
}




SELECT
{
padding-left: 2% ;
padding-right: 0px ;
width: 98.5% ;

-webkit-appearance: none; /* gets rid of default appearance in Webkit browsers*/
-moz-appearance: none; /* Get rid of default appearance for older Firefox browsers */
-ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/
appearance: none;

background-image: url('form-img/select-arrow.png') ;
background-repeat: no-repeat ;
background-position: 97% center ;

font-weight: 400 ;

}

select::-ms-expand 
{
    display: none;
}




input[type="date"]
{

}


input[type="file"]
{
font-size: 12pt ;
font-weight: 400 ;
}







INPUT[type="checkbox"], INPUT[type="radio"]
{
display: none
}


INPUT[type="checkbox"] + LABEL,
INPUT[type="radio"] + LABEL
{
position:relative ;
display: inline-block ;
width: 36% ;
margin-right: 8px ;
margin-bottom: 8px ;
padding: 7px ;
padding-left: 33px ;
background-color: rgba(255,255,255,0.15) ;
color: rgba(255,255,255,0.7) ;
border-radius: 4px ;
cursor: pointer ;
font-size: 12pt ;
font-weight: 400 ;

transition-property: background-color, color ;
transition-duration: 300ms;
}


INPUT[type="checkbox"]:checked + LABEL,
INPUT[type="radio"]:checked + LABEL
{
background-color: rgba(255,255,255,0.8) ;
color: rgba(145,0,75,1) ;
}


/* 1 column */
.onecolumn INPUT[type="checkbox"] + LABEL,
.onecolumn INPUT[type="radio"] + LABEL
{
display: block ;
width: auto ;
}





INPUT[type="checkbox"] + LABEL::before,
INPUT[type="radio"] + LABEL::before
{
position: absolute ;
left: 8px ;
top: 6px ;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: 21px;
}

INPUT[type="checkbox"] + LABEL::before
{
content: "\f096" ;
}

INPUT[type="checkbox"]:checked + LABEL::before
{
content: "\f046" ;
}

INPUT[type="radio"] + LABEL::before
{
content: "\f10c" ;
}

INPUT[type="radio"]:checked + LABEL::before
{
content: "\f192" ;
}











.form_input TABLE
{
width: auto ;
margin: 0px ;
padding-top: 0px ;
padding-left: 0px ;
padding-right: 0px ;
padding-bottom: 5px ;
}

.form_input TABLE TD, .form_input TABLE TR
{
margin: 0px ;
padding: 0px ;
}

.form_input TABLE INPUT[type="checkbox"], .form_input TABLE INPUT[type="radio"]
{
margin-left: 0px ;
}




INPUT[type="button"], INPUT[type="submit"], INPUT[type="reset"]
{
padding-top: 8px ;
padding-left: 5% ;
padding-right: 5% ;
padding-bottom: 8px ;
border: #ffffff 0px none ;
background-color: #ffffff ;
text-align: center ;
vertical-align: middle ;
font-size: 12pt ;
font-weight: 700 ;
color: rgba(145,0,75,1) ;
width: auto ;
min-width: 100px ;
margin-top: 10px ;
margin-right: 10px ;
cursor: pointer ;
border-radius: 4px ;

transition-property: background-color, color, opacity ;
transition-duration: 300ms;
}

INPUT[type="reset"], INPUT[type="submit"].reset
{
background-color: #9b9b9d ;
}












/* VALIDATION */


form label.error 
{
display: block ;

font-size: 9pt ;
font-weight: 400 ;
color: rgba(255,255,255,0.6) ;

padding: 0px ;
margin-top: 8px ;
margin-bottom: 5px ;
}





.validation_warning
{
color: rgba(0,200,0,1) !important ;
border: rgba(0,200,0,1) 2px solid !important ;

/*
background-color: rgba(0,200,0,0.1) !important ;
*/

}








/* PLACEHOLDER */


::-webkit-input-placeholder 
{
   color: rgba(255,255,255,0.4);
   font-weight: 400 ;
   font-style: italic ;
}

:-ms-input-placeholder 
{  
   color: rgba(255,255,255,0.4);
   font-weight: 400 ;
   font-style: italic ;
}

:-moz-placeholder  /* Firefox 18- */
{
   color: rgba(255,255,255,0.8);
   font-weight: 400 ;
   font-style: italic ;
}

::-moz-placeholder /* Firefox 19+ */ 
{ 
   color: rgba(255,255,255,0.8);
   font-weight: 400 ;
   font-style: italic ;
}








/* DISABLED */


INPUT[type="text"]:disabled, INPUT[type="password"]:disabled, TEXTAREA:disabled, SELECT:disabled
{
border: #f2f2f4 1px solid ;
background-color: #ffffff !important ;
color: #88888c ;
}

INPUT[type="checkbox"]:disabled + label, INPUT[type="radio"]:disabled + label
{
color: #88888c ;
}

INPUT[type="button"]:disabled, INPUT[type="submit"]:disabled, INPUT[type="reset"]:disabled
{
cursor: not-allowed ;
pointer-events: none;
opacity: 0.33;
}




/* READONLY */
/*

INPUT[type="text"]:read-only, INPUT[type="password"]:read-only, TEXTAREA:read-only
{
border: rgba(255,255,255,0) 1px solid ;
background-color: rgba(255,255,255,0.7) !important ;
color: rgba(145,0,75,1)  ;
cursor:not-allowed ;
}

INPUT[type="checkbox"]:read-only + label, INPUT[type="radio"]:read-only + label
{
color: #88888c ;
}

*/






/* Plain text */


INPUT[type="text"].plaintext
{
border: #ffffff 1px solid ;
color: #a90050 ;
}











/* TWO COLUMN */


.col1
{
width: 35% !important ;
margin-right: 1%  ;
}

.col2 
{
width: 57.2% !important ;
}






/* Three COLUMN */


.col3 INPUT,
.col3 SELECT
{
    width: 29.5% !important;
    margin-right: 1%;
}

.col33 .col3 INPUT:last-child,
.col33 .col3 SELECT:last-child 
{
margin-right: 0px  ;
}






INPUT[type="submit"].hunpro
{
width: 98.5% ;
}


.warning
{
font-size: 8.5pt;
color: rgba(0,200,0,1) ;
font-weight: 500 ;
}

.err
{
font-size: 8.5pt;
color: #bbbbbb;
}

.HiddenLink, .HiddenLink:link, .HiddenLink:active, .HiddenLink:visited, .HiddenLink:hover
{
font-size: 8.5pt;
color: #ffffff;
}













/* RANGE STYLING */


input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  border-radius: 4px;
}
input[type=range]:focus {
  outline: none;
}



input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  background: rgba(0, 0, 0, 0);
  border-radius: 4px;
  border: 2px solid #ffffff ;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 2px solid #91004b;
  height: 16px;
  width: 16px;
  border-radius: 0px;
  background: #aaaaab;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(0, 0, 0, 0);
}


input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(0, 0, 0, 0);
  background-color: #ffffff ;
  color: transparent ;
  border-radius: 4px;
  border: 2px solid #91004b ;
  margin-bottom: 0px !important ;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 2px solid #91004b ;
  height: 12px;
  width: 12px;
  border-radius: 0px;
  background: #aaaaab;
  cursor: pointer;
}







input[type=range]::-ms-track {
  width: 100% ;
  height: 16px ;
  cursor: pointer ;
  background-color: #ffffff ;
  border: 0px none rgba(0,0,0,0) ;
  color: transparent ;
  border-radius: 10px;
}
input[type=range]::-ms-fill-lower {
  background: rgba(0, 0, 0, 0);
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
  background: rgba(0, 0, 0, 0);
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(0, 0, 0, 0);
  border: 0px solid #000000;
  height: 14px;
  width: 14px;
  border-radius: 14px;
  background: #888899;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: rgba(0, 0, 0, 0);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgba(0, 0, 0, 0);
}




/* range styling addition  */



INPUT[type="range"], INPUT[type="range"]+INPUT 
{
    display: inline;
}


input[type=range] 
{
width: 67%;

margin-top: 0px ;
margin-left: 0px ;
margin-right: 0px ;
margin-bottom: 0px ;

padding-top: 0px ;
padding-left: 0px ;
padding-right: 0px ;
padding-bottom: 0px ;
}



INPUT[type="range"]+INPUT 
{
width: 14%;
padding-top: 0px ;
padding-left: 0px ;
padding-right: 0px ;
padding-bottom: 0px ;
margin-left: 4%;
margin-bottom: 10px;
text-align: center;
background-color: rgba(255,255,255,1);
color: rgba(145,0,75,1);
border: 0px solid rgba(0,0,0,0) !important ;
}

INPUT[type="range"] + INPUT + SPAN 
{
display: none ;
font-size: 10pt;
font-weight: 400;
color: rgba(255,255,255,0.6);
padding: 0px;
margin-top: 8px;
margin-bottom: 5px;
}

INPUT[type="range"] + INPUT + SPAN.show
{
display: block ;
}









/* / RANGE STYLING  */












/* IFRAME */


@media only screen and (max-width: 440px) 
{



}


















/* SMALL */


@media only screen and (max-width: 760px) 
{

    HEADER
    {
    padding: 20px 0px;
    margin-bottom: 20px ;
    }

    SECTION
    {
    padding-top: 0px ;
    }

    H1
    {
    font-size: 21px ;
    }

    H2
    {
    font-size: 15px ;
    }


    P
    {
    margin-top: 0px ;
    margin-bottom: 20px
    }


    .form
    {
    }

    .form_label, .form_input
    {
    display: block ;
    }

    .form_label
    .form_label, .label_row .form_input
    {
    font-size: 15px ;
    }

    .form_label
    {
    width: 100% ;
    text-align: left ;
    margin-bottom: 4px ;
    }

    .form_input
    {
    width: 100% ;
    padding-bottom: 10px ;
    }
        
    .space_row,
    .space_row .form_label,
    .label_row .form_label
    {
    display: none ;
    }
    
    .label_row .form_input
    {
    padding-top: 20px ;
    padding-bottom: 10px ;
    }

    .color_row .form_input
    {
    background-color: Transparent ; 
    padding-left: 0px ;
    padding-right: 0px ;
    }



    /* INPUT */

    SELECT
    {
    width: 96% ;
    }

    INPUT[type="checkbox"] + LABEL,
    INPUT[type="radio"] + LABEL
    {
    display: block ;
    width: auto ;
    padding: 10px;
    padding-left: 40px;
    }

    INPUT[type="checkbox"] + LABEL::before 
    {
    font-size: 30px;
    }



    /* TWO COLUMN */

    .col1,
    .col2
    {
    width: 96% !important ;
    }

    .col1
    {
    margin-right: 0px !important ;
    margin-bottom: 8px !important ;
    }

    /* THREE COLUMN */

    .col3 INPUT
    {
    width: 96% !important ;
    margin-right: 0px  ;
    margin-bottom: 5px  ;
    }





    .divider_row .form_input
    {
        display: none ;
    }



}

