﻿.ccms-contactform
{
	font-family: 'Open Sans', sans-serif;
	/*font-size: 0 !important; /* white space fix */
	line-height: 1.8;
	border: 1px solid #ccc;
	background: #fff;
	padding: 10px 20px 20px 20px;
	margin-bottom: 5px;
}

#ccms-contactform-formpanel input, #ccms-contactform-formpanel textarea, #ccms-contactform-formpanel select, #ccms-contactform-formpanel button
{
	padding: 10px;

	/* Border */
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	/* Background */
	background: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#f5f5f5));
	background: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
	background: -moz-linear-gradient(top, #ffffff, #f5f5f5);
	background: -o-linear-gradient(top, #ffffff, #f5f5f5);
	background: -ms-linear-gradient(top, #ffffff, #f5f5f5);
	background: linear-gradient(top, #ffffff, #f5f5f5);
	background-color: #ffffff;
}
.ccms-contactform input:focus, .ccms-contactform textarea:focus, .ccms-contactform select:focus, .ccms-contactform button:focus { outline: none; }

/* Apply outline on focus for form elements */
#ccms-contactform-formpanel input:focus,
#ccms-contactform-formpanel textarea:focus,
#ccms-contactform-formpanel select:focus,
#ccms-contactform-formpanel button:focus {
	outline: 2px solid black;
}

.ccms-contactform-cb
{
	clear:both;
}

.ccms-contactform input[type='text'], .ccms-contactform textarea, #ccms-contactform-emailreceiptholder
{
	float: left;
	width: 85%;
	max-width: 400px;
	margin-bottom: 10px;
}

.ccms-contactform label, .ccms-contactform span.label
{
	width: 100px;
	float: left;
}

.ccms-contactform .buttonPanel
{
	float: left;
	width: 85%;
	max-width: 400px;
	margin-top: 10px;
}

#ccms-contactform-verifypanel
{
	float: left;
	border: solid 1px #CCCCCC;
	border-radius: 3px;
	padding: 10px 10px 10px 10px;
	width: 85%;
	max-width: 400px;
}

#ccms-contactform-spinner
{
	display: none;
	float: left;
	background: url('ani-loading-small.gif') no-repeat center left;
	width: 50px;
	height: 32px;
}

#ccms-contactform-verifytext, #ccms-contactform-emailreceipttext
{
	float: left;
	padding-left: 10px;
	line-height: 32px;
}

#ccms-contactform-checkpanel, #ccms-contactform-emailreceiptpanel
{
	float: left;
}

#ccms-contactform-submittingpanel { display: none; }
#ccms-contactform-submitting { display: none; }
#ccms-contactform-thankyou { display: none; }

/************************* styled checkbox *************************/
input[type="checkbox"].ccms-contactform-fancycheckbox + label
{
    display:block;
    height: 28px;
    float: none !important;
    width: auto !important;
    line-height: 25px;
}

input[type="checkbox"].ccms-contactform-fancycheckbox
{
    display:none;
}

input[type="checkbox"].ccms-contactform-fancycheckbox + label span
{
    display:inline-block;
    position:relative;
    float:right;
    width:49px;
    height:29px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    background:#dbdbdb;
    border-radius:15px;
    border: solid 2px #9f9f9f;
    box-shadow:0px 0px 8px 0px #9f9f9f inset;
    box-sizing: border-box;
}

input[type="checkbox"].ccms-contactform-fancycheckbox + label span:after
{
    content:"";
    display:block;
    width:25px;
    height:25px;
    position: absolute;
    right:20px;
    top:0px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e0e0+0,ffffff+52 */
    background: rgb(224,224,224); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(224,224,224,1) 0%, rgba(255,255,255,1) 52%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(224,224,224,1)), color-stop(52%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(224,224,224,1) 0%,rgba(255,255,255,1) 52%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(224,224,224,1) 0%,rgba(255,255,255,1) 52%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(224,224,224,1) 0%,rgba(255,255,255,1) 52%); /* IE10+ */
    background: linear-gradient(135deg,  rgba(224,224,224,1) 0%,rgba(255,255,255,1) 52%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    box-shadow:0px 0px 2px 1px #afafaf;
    border-radius:15px;
    border:solid 1px #ccc;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-sizing: border-box;
    
}

input[type="checkbox"].ccms-contactform-fancycheckbox:checked + label span
{
    background:#73d87a;
    border-radius:15px;
    border: solid 2px #699e6e;
    box-shadow:0px 0px 8px 0px #699e6e inset;
}

input[type="checkbox"].ccms-contactform-fancycheckbox:checked + label span:after
{
    right:0px;
    box-shadow:0px 0px 2px 1px #699e6e;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    
}

input[type="checkbox"].ccms-contactform-fancycheckbox:disabled + label 
{
	color: #AAAAAA;
}
/************************* /styled checkbox *************************/

/* ADA Compliance */
.visuallyhidden
{
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	left: -9999em;
    color:#000!important;
}

input[type="checkbox"].ccms-contactform-fancycheckbox + label 
{
	color: #000;
	text-indent: -9999px;
}