/*
	# Company: Puma Energy
	# CSS Framework: � 2012 Effectal Media
	# CSS Authors: Effectal Media - Nick Maller, Chris Vincent
	# File: form.css
*/

/* 
	** Global components
*/
fieldset
{
	border: 0;
}
fieldset legend
{
	display: none;
}

fieldset div
{
	clear: both;
	padding: 4px 0 2px;
}
fieldset label
{
	display: block;
	float: left;
	width: 24%;
	padding-top: 3px;
	padding-right: 1%;

    font-size: 0.8em;
	cursor: pointer;
}
fieldset li
{
	list-style-type: none;
}
textarea
{
	font-family: inherit;
}

fieldset input.txt,
fieldset textarea.txt,
fieldset select.ddl
{
	width: 52%;
	
}
fieldset input.txt,
fieldset textarea.txt
{
	padding: 1px;
	background: #fff;
	border: 1px solid #cbd1d3;
}
fieldset input.btn,
a.btn:link,
a.btn:visited
{
    position: relative;
	display: block;
	width: 100%;
	padding: 13px 0;
    cursor: pointer;
    background: url(../images/btn-bg.jpg) 100% 5px no-repeat #ed1c24;
    border: none;
    color: #fff;
    font-size: 14px;
    text-align: center;
}
a.btn:link,
a.btn:visited
{
	float: left;
	width: auto;
	margin-top: 22px;
	padding: 14px 40px 14px 30px;
	font-size: 110%;
	text-transform: uppercase;
	background-position: 100% 50%;
	text-decoration: none;
}
a.btn:after 
{
  content: " ";
  width: 0;
  height: 0;
  border-top: 28px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 21px solid #ed1c24;
  position: absolute;
  top: 0;
  right: -21px;
}`
a.btn.loading
{
	background-image: url(../images/ajax-loader.gif);
	background-position: 95% 50%;
}

/* full */
fieldset div.full label
{
	float: none;
	width: auto;
	padding-bottom: 2px;
}
fieldset div.full input.txt,
fieldset div.full textarea.txt
{
	width: 95%;
}
fieldset div.full select.ddl
{
    width: 90%;
}


/* buttons, checklist */
fieldset div.buttons,
fieldset div.checklist ul,
fieldset ul.checklist,
fieldset .nested
{
	margin-left: 0;
	width: 75% !important;
	padding-left: 25%;
}
fieldset div.checklist label,
fieldset ul.checklist label
{
	float: none;
	width: auto;
}
fieldset ul.checklist
{
	padding-bottom: 0;
}
fieldset .checklist li
{
	line-height: 1.1em;
	margin: 0;
	padding: 0;
	background: none;
}
fieldset div.checklist label
{
	padding-left: 18px;
}
	fieldset div.checklist label input
	{
		float: left;
		margin: 1px 0 0 -18px;
	}

/* Form Validation */
fieldset .required
{
	color: #00acd5;
	font-size: 90%;
}
form p.error,
fieldset input.error,
fieldset textarea.error
{
	border: 1px solid #e60000;
}
label.error
{
	float: none;
	width: auto;
	padding-left: 30%;
	
	color: #e60000;
	font-size: 90%;
}

/* Striped Forms */
fieldset.striped div
{
	float: left;
	width: 100%;
	clear: both;
	margin-bottom: 4px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e4e5e5;
}
	fieldset.striped div div
	{
		float: none;
		width: auto;
		clear: none;
	}
	fieldset.striped div.buttons
	{
		border: 0;
	}

/* 
	** Custom Form Styling
*/


/* silverstripe default style */
.form-container
{
    clear: both;
}
.form-container form
{
    clear: both;
}
    .form-container fieldset
    {
        padding: 0;
        margin: 0;

        line-height: 0;
    }
        .form-container h2,
        .form-container h3
        {
            clear: both;
        }
        .form-container fieldset label
        {
            display: block;
            width: 100%;
            padding: 0 0 5px 0;

            text-transform: uppercase;
        }
			.form-container fieldset label.error
			{
                padding: 3px 0 0 0;
                display: inline-block;
                width: auto;

                font-size: 12px;
                color: #ed1c24;
                text-transform: none;
            }
			.form-container fieldset .checkbox label.error
			{
				position: relative;
				top: -4px;
				padding: 0 0 0 7px;
			}

        .form-container fieldset input.text,
        .form-container fieldset input.mathspamprotector,
        .form-container fieldset textarea
        {
            padding: 8px;
            width: 94%;
			max-width: 300px;

            border: 1px solid #e5e5e5;

            font-size: 12px;
        }
        .form-container fieldset select.dropdown
        {
            padding: 7px 8px;
            width: 98%;

            border: 1px solid #e5e5e5;
            background: #fff;

            font-size: 12px;
        }
        .form-container fieldset div
        {
            clear: both;
            padding-bottom: 25px;
            width: 46.5%;
            float: left;
        }
            .form-container fieldset div .description
            {
                font-size: 11px;
                text-transform: none;
            }
            .form-container fieldset div .hide
            {
                display: block;
            }
            .form-container fieldset div.alt
            {
                margin-left: 4%;
                clear: none;
            }
            .form-container fieldset div.hide
            {
                display: none;
            }
            .form-container fieldset div.wide
            {
                width: 97%;
                clear: both;
            }
                .form-container fieldset div.wide input.text,
                .form-container fieldset div.wide textarea
                {
                    width: 97%;
                }

        .form-container fieldset button
        {
            padding: 4px 12px;

            font-size: .9em;
            font-weight: bold;
            cursor: pointer;
        }
        .form-container fieldset button.action
        {
            margin-left: 15%;
        }

        .form-container fieldset div.fieldgroup,
        .form-container fieldset div.fieldgroupField
        {
            padding: 0;
        }
        .form-container fieldset div.middleColumn
        {
            padding: 0;
            width: auto;
            float: none;
            clear: none;
        }

        .form-container fieldset div.checkbox
		{
			padding-bottom: 8px;
		}
        .form-container fieldset div.checkbox input[type=checkbox]
        {
            float: left;
			margin: 0;
        }
        .form-container fieldset div.checkbox label
        {
            float: none;
            padding: 0 0 0 20px;
            clear: none;
            width: auto;
			text-transform: none;
        }
        .form-container fieldset div.optionset
        {
            padding-bottom: 15px;
        }
            .form-container fieldset div.optionset .middleColumn
            {
                clear: both;
                width: 100%;
            }
            .form-container fieldset div.optionset .optionset li
            {
                float: left;
                padding: 5px 30px 0 0;
                width: auto;

                background: none;
            }
                .form-container fieldset div.optionset .optionset li label
                {
                    clear: none;
                    padding: 0;
                    display: inline;
                    float: none;
                }

        .form-container fieldset div.checkboxset .checkboxset > li
        {
            width: 35%;
            padding-left: 20px;
        }
            .form-container fieldset div.checkboxset .checkboxset > li.odd
            {
                clear:both;
            }

        .form-container fieldset div.checkboxset .checkboxset input[type=checkbox]
        {
            margin: 5px 5px 0 -20px;
        }
        .form-container fieldset div.checkboxset .checkboxset label
        {
            text-transform: none;
        }

        .form-container fieldset div.multicolumn
        {
            padding-bottom: 0;
            width: 100%;
        }
            .form-container fieldset div.multicolumn div.third
            {
                clear: none;
                width: 33%;
            }
                .form-container fieldset div.multicolumn div.third input.text,
                .form-container fieldset div.multicolumn div.third textarea
                {
                    width: 86%;
                }
                .form-container fieldset div.multicolumn div.third.alt
                {
                    margin-left: 0;
                }

        .form-container fieldset .message
        {
            margin-top: 5px;
        }
        .form-container fieldset .required,
        .form-container fieldset .validation
        {
            display: block;
            margin-left: 15%;
        }
        .form-container fieldset .readonly
        {
            display: block;
            padding: 3px 0 2px 0;
        }

    .form-container .message
    {
        margin-bottom: 8px;
        padding: 8px 16px;
    }
    .form-container fieldset div .message
    {
        margin: 0;
        padding: 2px 0 0 15%;
    }
    .form-container fieldset div.clear
    {
        clear: both;
        padding: 0;
        margin: 0;
        float: none;
    }
    .form-container .Actions
    {
        clear: both;
        height: 50px;
        width: 96.5%;
        padding-top: 30px;
        margin: 30px 0 15px 0;

        border-top: 5px solid #f3f3f3;

        text-align: right;
    }
    .form-container .Actions p
    {
        padding: 5px 0 0 0;
        margin: 0;
        width: auto;
    }
    .form-container .Actions .action
    {
        cursor: pointer;
        background: url(../images/btn-bg.jpg) 100% -1px no-repeat #ed1c24;
        border: none;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        width: auto;
        padding: 7px 23px 7px 13px;
    }




/* Page Forms */

.pageForm input.text
{
    border: 1px solid #e5e5e5;
}






/*
@media only screen and (min-width: 320px) and (max-width: 1024px)
{
	fieldset input[type=checkbox]
	{
		display: block;
		width: 44px;
		height: 44px;
		opacity: 0;
	}
	fieldset input[type=checkbox] + label
	{
		display: block;
		height: 38px;
		padding-top: 6px;
		padding-left: 60px;
		background: url(../images/mobile-checkbox.gif) no-repeat 0 0 transparent;
	}
	fieldset input[type=checkbox]:checked + label
	{
		background-position: 0 -44px;
	}
}
*/
@media only screen and (min-width: 320px) and (max-width: 1024px)
{
	.form-container fieldset div
	{
		width: 95%;
		clear: both;
		margin-left: 0;
		padding-bottom: 10px;
	}
	.form-container fieldset div.alt
	{
		margin-left: 0;
	}
}

@media only screen and (min-width : 1025px)
{
    fieldset input.btn
    {
        width: auto;
        padding: 7px 23px 7px 13px;
        background-position: 100% -1px;
    }
	fieldset input[type=checkbox]
	{
		display: block;
		float: left;
		margin: 9px 7px 0 0;
	}
}