/* General structure for form layout ////////////////////////////////////////////*/
*[hidden] { display: none; }


#sticky-side h2 {
    font-size:.8em;
}

#sticky-side.fixed {
    position:fixed;
    top:10px;
}

#header .introduction {
    position:relative;
    padding-bottom:220px;
}

.introduction {
    position:relative;
}

#header .introduction.second-step {
    padding-bottom:170px;
}

#sidebar .introduction {
    position:relative;
}

.intro-block {
    font-family:RidemyBikePro;
    font-size:2em !important;
    line-height:1.1em !important;
    position:absolute;
    color:#7d6a55;
    margin:0;
}

.intro-block .arrow-down01, .intro-block .arrow-down02  {
    margin:10px auto 0;
}

.intro-block .arrow-left01 {
    position:absolute;
    top:-15px;
    left:-8px;
}

.intro-block .arrow-left02 {
    position:absolute;
    bottom:-15px;
    left:-8px;
}

.intro-block .arrow-right01 {
    position:absolute;
    top:-15px;
    right:-8px;
}

.intro-contact {
    width:200px;
    display:block;
    text-align:center;
    bottom:90px;
    right:0;
    background:#0087a5;
    color:#fff;
    padding:20px;
}

.intro-contact a {
    color:#fff;
}

.intro-form {
    width:250px;
    text-align:center;
    font-size:1.7em !important;
    left:300px;
    bottom:-20px;
}

.intro-documents {
    width:200px;
    text-align:center;
    font-size:1.7em !important;
    /*left:300px;
    top:200px;*/
    left:0;
    top:100px;
}

.intro-nav {
    width:200px;
    text-align:center;
    font-size:1.7em !important;
    left:20px;
    bottom:15px;
}

.intro-initial-form {
    width:250px;
    text-align:center;
    font-size:1.7em !important;
    left:0;
    top:210px;
}
.intro-family-form {
    width:250px;
    text-align:center;
    font-size:1.7em !important;
    left:0;
    top:290px;
}
.form {
    min-height:1px;
    padding:0;
} .form:after { content:'.'; clear:both; visibility:hidden; display:block; height:0; }

    .form aside {
        width:225px;
        float:left;
        padding:10px;
    }

    .form .content {
        width:720px;
        float:right;
    }

.green { color:#7fa441; font-weight:bold; }
.red { color:#cc0c0c; font-weight:bold; }
.orange { color:#ff9b19; font-weight:bold; }
.gray { color:#d1d1d1; font-weight:bold; }

.form h2 {
    font-family:BrandonGrotesque-Bold;
    color:#222;
}

.validate-group p {
    width:70%;
}

.validate-group p strong {
    font-family:BrandonGrotesque-Bold;
}

.form p em {
        color:#999 !important;
        font-style:normal;
        font-weight:normal;
        font-family:BrandonGrotesque-Regular !important;
        line-height:1.3em; /* Required if em is set to be a block element inline */
        padding-top:3px; /* Required if em is set to be a block element inline */
}


/* Aside ////////////////////////////////////////////*/

.percent-complete {
    text-align:center;
    border-bottom:1px solid #ccc;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
}

    .percent-complete strong {
        display:block;
        font-size:50px;
        font-family:BrandonGrotesque-Black;
        line-height:1.1em;
    }

.form-nav {
    border-bottom:1px solid #ccc;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
}

.form-nav ul {
    margin:0;
    padding:0;
}

.form-nav li {
    margin:0;
    padding:0 0 0 30px;
    list-style:none;
    position:relative;
    vertical-align:middle;
    margin-bottom:5px;
    display:block;
    border-radius: 2px;
    -moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

    .form-nav li.selected {
        background:#494949;
    }

        .form-nav li.selected a {
            text-decoration:none;
            color:#fff !important;
        }

.form-nav a {
    display:inline-block;
    color:#222;
    text-transform:uppercase;
    padding:11px 5px 10px;
    line-height:1.3em;
    font-size:11px;
}

.form-nav .percent-pie {
    position:absolute;
    top:9px;
    left:10px;
}

    .form-nav .percent-pie canvas {
        width:18px !important;
        height:18px !important;
    }


/* Validate group ////////////////////////////////////////////*/

.validate-group {
    border:1px solid;
    margin-bottom:5px;
    position:relative;
    padding:1em 25px 0;
    border-color:#d1d1d1;
    border-radius: 2px;
    -moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

/* Validate specs */
.validate-group.required { border-color:#ffd6a1; }
.validate-group.valid { border-color:#c5dba0; }
.validate-group.invalid { border-color:#ffc7c7; }

    .validate-group:hover {
        z-index:100;
    }

.validate-group h2 {
    margin:0 0 1.5em;
}

.validate-group h4 {
    margin:2.5em 0 0;
}

.validate-group h2.following-content {
    margin:0 0 .1em;
}

/* Flyout ////////////////////////////////////////////*/

.flyout {
    display:none;
    width:200px;
    background:#fff;
    border:1px solid #ccc;
    position:absolute;
    padding:1.5em 30px;
    z-index:1000;
    text-align:left;
    margin-top:-1px;

    box-shadow:0px 0px 0px 5px rgba(0,0,0,.1);
    -webkit-box-shadow:0px 0px 0px 5px rgba(0,0,0,.1);
    -moz-box-shadow:0px 0px 0px 5px rgba(0,0,0,.1);
}

.flyout-left { right:-20px; }
.flyout-right { left:-20px; }

.flyout h2 {
    margin:0 0 10px;
}
 
.information-container:hover .flyout { 
    display:block; 
    z-index:100;
}

.information-error .flyout {
    border-color:#cc0c0c;
}

.information-error .flyout h2 {
    color:#cc0c0c;
}

/* Information error ////////////////////////////////////////////*/

.state-indicate {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:5px;
    text-align:center;
    background-color:#d1d1d1;
    z-index:1;
}

.state-indicate:hover {
    z-index:100000;
}

/* Validate specs */
.validate-group.required .state-indicate { background-color:#ff9b19; }
.validate-group.valid .state-indicate { background-color:#7fa441; }
.validate-group.invalid .state-indicate { background-color:#cc0c0c; }


/* Information assist ////////////////////////////////////////////*/

.information-assist {
    position:absolute;
    top:5px;
    right:7px;
    z-index:1;
}

.information-assist:hover {
    z-index:100000;
}

    .information-assist [class*='icon'] {
        font-size:28px;
        line-height:1em;
        color:#000;
        cursor:pointer;
        position:relative;
        display:block;

    }

    .ie7 .information-assist [class*='icon'] {
        color:#000;
        height:20px;
        width:20px;
    }

/* Align Right ////////////////////////////////////////////*/
.mixed-content {
    min-height:1px;
    margin:20px 0;
}

.mixed-content:after {
    content:'.';
    clear:both;
    visibility:hidden;
    display:block;
    height:0;
}

.mixed-content a {
    margin:0;
}

/* Field group / Field ////////////////////////////////////////////*/
.field-group {
	min-height: 1px;
	margin: 0 0 1.2em 0;
	position: relative;
	clear: both;
} .field-group:after { content: "."; height: 0; display: block; clear: both; visibility: hidden; }

.field-group .field {
	float: left;
	margin: 0 1em 0 0;
	position: relative;
    width:260px;
}

.field-group label {
 	display: block;
	text-align: left;
	color: #222;
	font-weight: normal;
	font-size: 16px;
	line-height: 1.25em;
	margin: 0 0 .5em 0;
    max-width:300px;
    font-family:BrandonGrotesque-Bold;
}

    .field-group label em {
        color:#aaa;
        font-style:normal;
        font-weight:normal;
        font-family:BrandonGrotesque-Regular;
        line-height:1.3em; /* Required if em is set to be a block element inline */
        padding-top:3px; /* Required if em is set to be a block element inline */
    }

.validate-group.required .label-error, .validate-group.valid .label-error { color: #ff9b19; }
.validate-group.invalid .label-error { color:#cc0c0c; }

.field input[type='text'],
.field input[type='email'],
.field input[type='url'],
.field input[type='password'],
.field select,
.field textarea {
	background: none;
	padding: 7px 4px;
	border: 1px solid #CBCBCB;
	color: #000;
	border-radius: 2px;
    -moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	height: 1.33em;
	margin: 0;
    width: 300px;
    font-family:BrandonGrotesque-Regular;

    transition:border-color .2s;
    -moz-transition:border-color .2s;
    -webkit-transition:border-color .2s;
}

.ie7 .field input[type='text'],
.ie7 .field input[type='email'],
.ie7 .field input[type='url'],
.ie7 .field input[type='password'],
.ie7 .field select,
.ie7 .field textarea {
    font-family:'Courier New', 'Courier New', monospace;
}
		
.field select { height: auto; color: #555; }

.field input[type='text']:focus,
.field input[type='email']:focus,
.field input[type='url']:focus,
.field input[type='password']:focus,
.field select:focus,
.field textarea:focus {
    border-color:#000;
}
	
input[type=text].long,
input[type=email].long,
input[type=url].long,
input[type=password].long,
select.long,
textarea.long {
    width: 500px;
}

input[type=text].medium,
input[type=email].medium,
input[type=url].medium,
input[type=password].medium,
select.medium,
textarea.medium {
    width: 200px;
}
	
input[type=text].short ,
input[type=email].short ,
input[type=url].short ,
input[type=password].short ,
select.short {
    width: 100px;
}
	
input[type=text].tiny,
input[type=email].tiny,
input[type=url].tiny,	
input[type=password].tiny,
select.tiny {
    width: 25px;
}

select.auto {
    width:auto;
}

.field textarea {
    min-height:100px;
}

.field textarea.huge, .field.huge textarea {
    width:550px;
    height:400px;
}

.timespan .timepicker {
    width:180px
}

.timepicker div.minute,
.timepicker div.hour{ float: left; width: auto; margin: 0 1em 0 0; }

.timepicker .hour label,
.timepicker .minute label{
    display: inline-block;
    width: auto;
}


.daily {
    position:relative;
}

.daily-total {
    position:absolute;
    top:0;
    right:0;
    margin-top:0;
    border-radius: 2px;
    -moz-border-radius: 2px;
	-webkit-border-radius: 2px;
    text-transform:uppercase;
    font-size:12px;
    line-height:1em;
}

.daily-total  i {
    font-size:2.1em;
    color:#ccc;
    margin-right:5px;
    position:relative;
    top:5px;
}

.total {
    font-family:BrandonGrotesque-Bold;
    text-transform:uppercase;
    border-top:1px solid #ccc;
    padding-top:10px;
    text-align:right;
}


/* Checkbox list / Radio list ////////////////////////////////////////////*/

.checkbox-list ul,
.radio-list ul {
    margin:0;
    padding:0;
    list-style:none;
    min-height:1px;
} .checkbox-list ul:after, .radio-list ul:after { content:'.'; clear:both; visibility:hidden; display:block; height:0; }

.checkbox-list li,
.radio-list li {
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    padding-left:25px;
    margin-top:.5em;
    vertical-align:top;
}

/* Hack for ie7 */
.ie7 .checkbox-list li,
.ie7 .radio-list li {
    display: inline-block;
}

.checkbox-list.horizontal li,
.radio-list.horizontal li { 
    float:left;
    margin-right:10px;
}

.checkbox-list.fixed-width li,
.radio-list.fixed-width li { 
    width:160px;
}

.checkbox-list input[type='checkbox'],
.radio-list input[type='radio'] {
    position:absolute;
    top:-1px;
    left:0;
}

.checkbox-list .checkbox-readonly {
    position:absolute;
    top:1px;
    left:0;
}

.checkbox-list li label,
.radio-list li label {
    font-weight:normal;
    color:#000 !important;
    margin-bottom:0;
}

/* Checkbox (single) ////////////////////////////////////////////*/

.checkbox {
    position:relative;
}

    .checkbox input[type='checkbox'],
    .checkbox .checkbox-readonly {
        position:absolute;
        top:-1px;
        left:0;
    }

    .checkbox .checkbox-readonly {
        position:absolute;
        top:1px;
        left:0;
    }

    .checkbox label {
        padding-left: 25px;
        max-width: 80%;
    }

/* Checkbox (flow) ////////////////////////////////////////////*/

.checkbox-flow {
    position:relative;
    display:block;
    margin-bottom:20px;
}

    .checkbox-flow input[type='checkbox'] {
        
    }

    .checkbox-flow label {
        padding-left:2px;
        margin:0 10px 0 0;
        display:inline-block;
        font-family:BrandonGrotesque-Bold;
        
    }

/* File upload ////////////////////////////////////////////*/

.upload-button {
    position:relative;
    padding:0;
    
}

.upload-button__container {
    display:inline-block;
    zoom: 1;
    *display: inline;
    cursor:pointer;
    overflow:hidden;
    position:relative;
    height:60px;
}

    .upload-button input[type='file'] {
        font-size:200px;
        position:absolute;
        top:0;
        right:0;
        margin:0;
        padding:0;
        z-index:100;
        cursor:pointer;
        opacity:0;
        filter:alpha(opacity=0);
    }

    /*.upload-button .button.loading {
        background:red !important;
    }*/    

.image-crop {
    margin-bottom:1.5em;
}

.image-crop img {
    width:80%;
}

.upload-file .upload-tools {
    float:right;
    text-align:right;
}

.upload-file .upload-button .button {
    margin-top:0;
}

.upload-file label {
    width:50%;
    float:left;
    margin:0;
}

.upload-result div {
    text-transform:uppercase;
    font-size:12px;
}

.upload-file .upload-result {
    text-align:right;
}

.upload-file .file-upload, .upload-file .file-cancel {
    display:none;
}

/* Dropdown Date Picker ////////////////////////////////////////////*/

.dropdown-date-picker {
    min-height:1px;
}

.dropdown-date-picker:after {
    content:'.';
    clear:both;
    visibility:hidden;
    display:block;
    height:0;
}

.dropdown-date-picker .day, .dropdown-date-picker .month, .dropdown-date-picker .year {
    float:left;
    margin-right:5px;
}

/* Trigger / Target ////////////////////////////////////////////*/

.field-group [class*='trigger-'] {
    background:url(trigger.png) no-repeat 0 5px;
    padding-left:40px;
    margin-left:-15px;
}

    .field-group [class*='trigger-'] input[type='checkbox'],
    .field-group [class*='trigger-'] input[type='radio'] {
        left:15px;
    }

.field-group[class*='target-'] {
    opacity:.3;
    filter:alpha(opacity=30); 
    pointer-events:none;
}

/* save-group ////////////////////////////////////////////*/

.save-group {
    background:#0087a5;
    padding:20px;
    border-radius: 2px;
    -moz-border-radius: 2px;
	-webkit-border-radius: 2px;
    position:fixed;
    bottom:0;
    width:680px;
    z-index:1000;
}

    .save-group input[type='submit'], .save-group .button {
        display: inline-block;
        zoom: 1;
        *display: inline;
	    padding: 0 2em;
	    height: 4em;
	    background: none;
        border:1px solid #73c5d7;
	    line-height: 4em;
        letter-spacing:.1em;
	    font-weight: normal;	
	    font-size: .666em;
	    text-transform: uppercase;
	    color: #fff;
	    text-decoration: none;
	    margin:0;	
	    border-radius: 2px;
        transition:background .2s;
    }

    .save-group input[type='submit']:hover, .save-group .button:hover {
        background:#fff;
        color:#0087a5 !important;
    }

    .save-group .button:hover i {
        border-left-color:#0087a5;
    }

.next-section {
    float:right;
}


/* submit-group ////////////////////////////////////////////*/

.submit-group {
    background:#0087a5;
    padding:20px;
    border-radius: 2px;
    -moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

    .submit-group input[type='submit'], .submit-group .button {
        display: inline-block;
        zoom: 1;
        *display: inline;
	    padding: 0 2em;
	    height: 4em;
	    background: none;
        border:1px solid #73c5d7;
	    line-height: 4em;
        letter-spacing:.1em;
	    font-weight: normal;	
	    font-size: .666em;
	    text-transform: uppercase;
	    color: #fff;
	    text-decoration: none;
	    margin:0;	
	    border-radius: 2px;
        transition:background .2s;
    }

    .submit-group input[type='submit']:hover, .submit-group .button:hover {
        background:#fff;
        color:#0087a5 !important;
    }

    .submit-group .button:hover i {
        border-left-color:#0087a5;
    }

    .submit-group .other-link {
        color:#fff;
        margin-left:20px;
    }

/* Error Message ////////////////////////////////////////////*/

/* This is just a fix for the server side validation */
.error {
    color:#cc0c0c;
    font-family:BrandonGrotesque-Black;
    font-size:14px;
    padding:0 0 10px 0;
    text-transform:uppercase;
}

.error-message {
    color:#cc0c0c;
    padding:0 0 10px;
    position:relative;
    text-transform:uppercase;
    font-size:14px;
    font-family:BrandonGrotesque-Black;
}

.error-message i {
    font-size:2em;
    position:relative;
    top:5px;
    margin-right:10px;

}

.private {
    color:#0087a5;
    font-size:1.2em;
}

.form .field-group .number-count {
    /*color:#7fa441;
    color:#cc0c0c !important;*/
    text-transform:uppercase;
    font-size:11px;
    font-family:BrandonGrotesque-bold;
    display:block;
    margin-top:1em;
}

.copy-details {
    float:right;
}