/************************************************
	    FORM INPUT CONTROL STYLES
		STYLE DEFINITIONS
		VERSION 1.0
		Developed by Justin Kercher
        Apollo Internet Media
		Create: 02/03/2013
        
        !!NB: DO NOT MODIFY THIS DOCUMENT DIRECTLY!!
        APPLY OVERRIDES IN STYLE.CSS, 
        (or main site style sheet)

        Any form that uses Jquery Validate will
        need to be in an element with a class of 
        'form'
    ************************************************/
    
    input.validate-error,  textarea.validate-error, select.validate-error { border: solid 1px red !important; color: red; }
    .validate-error:not([style="display: none;"]) + label { color: red; }
    
    /* For Jquery Validate */
    label.validate-error { position: absolute !important; right: 0px; top: 0px; height: auto; width: auto;  background-color: transparent !important; border: 0px none !important; border-radius: none; padding: 0px; }

    .halfwidth { width: 48%; }    

    input[type="checkbox"] + label, input[type="radion"] + label { display: inline-block; margin-left: 15px; }


    /* Enquiry form radio group */
    ul.form-radio-list { padding: 0px; }
    ul.form-radio-list > li { display: block; text-align: left; position: relative; }
    ul.form-radio-list > li > input { visibility: hidden; position: absolute; }
    ul.form-radio-list > li > label { margin: 0px; display: block; cursor: pointer; font-weight: normal; }
    ul.form-radio-list > li > input+label:not(.validate-error):before, ul.form-radio-list > li > input+label+label:before { 
        content: ""; display: inline-block; border-radius: 50%; background-color: #fff; border: solid 2px #dedede; height: 24px; width: 24px; 
        cursor: pointer; margin-right: 10px; position: relative; top: 6px; 
        -webkit-transform-origin: center center;  -moz-transform-origin: center center;  -o-transform-origin: center center; transform-origin: center center; 
        -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;  -o-transition: all 0.2s ease-in-out;  transition: all 0.2s ease-in-out; 
    }

        ul.form-radio-list > li:hover > input+label:before { border-color: #ccc; }

        ul.form-radio-list > li > input:checked+label:before { 
            background-color: #ccc;  
            border-color: #ccc;
            -webkit-transform: scale(1.2); -moz-transform: scale(1.2);  -o-transform: scale(1.2);  transform: scale(1.2); 
        }


    /* Checkbox list */
    ul.form-checkbox-list { padding: 0px; margin: 0px; }
    ul.form-checkbox-list > li { display: block; text-align: left; position: relative; }
    ul.form-checkbox-list > li > input { visibility: hidden; position: absolute; }
    ul.form-checkbox-list > li > label { margin: 0px; display: block; cursor: pointer; }
    ul.form-checkbox-list > li > input+label:before { 
        content: ""; display: inline-block;  background-color: #fff; border: solid 2px #dedede; height: 24px; width: 24px; 
        cursor: pointer; margin-right: 10px; position: relative; top: 6px; 
        -webkit-transform-origin: center center;  -moz-transform-origin: center center;  -o-transform-origin: center center; transform-origin: center center; 
        -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;  -o-transition: all 0.2s ease-in-out;  transition: all 0.2s ease-in-out; 
    }

        ul.form-checkbox-list > li:hover > input+label:before { border-color: #ccc; }

        ul.form-checkbox-list > li > input:checked+label:before { 
            background-color: #ccc;  
            border-color: #ccc;
            -webkit-transform: scale(1.2); -moz-transform: scale(1.2);  -o-transform: scale(1.2);  transform: scale(1.2); 
        }

    @media (min-width: 768px) {
        /* Enquiry form radio buttons */
        ul.form-radio-list > li { display: inline-block; text-align: center; width: 60px; }
        ul.form-radio-list > li > input { position: relative; }
        ul.form-radio-list > li > label { margin: 5px 15px; }
        ul.form-radio-list > li > input+label:before { 
            left: 50%; position: absolute; top: auto;
            -webkit-transform: translate(-50%, -100%); -moz-transform: translate(-50%, -100%);  -o-transform: translate(-50%, -100%);  transform: translate(-50%, -100%); 
            -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;  -o-transition: all 0.2s ease-in-out;  transition: all 0.2s ease-in-out; 
        }

        ul.form-radio-list > li > input:checked+label:before {     
            -webkit-transform: translate(-50%, -100%) scale(1.2); -moz-transform: translate(-50%, -100%) scale(1.2);  -o-transform: translate(-50%, -100%) scale(1.2);  transform: translate(-50%, -100%) scale(1.2); 
        }
    }