@font-face {
    font-family: 'oswaldbook';
    src: url('../fonts/oswald-regular-webfont.eot');
    src: url('../fonts/oswald-regular-webfont.eot#iefix') format('embedded-opentype'),
         url('../fonts/oswald-regular-webfont.woff') format('woff'),
         url('../fonts/oswald-regular-webfont.ttf') format('truetype'),
         url('http://completeflorida.org/content/fonts/oswald-regular-webfont.svg#oswaldbook') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* font-family: 'Oswald', 'sans-serif'; */

html { }
body { font-size: 62.5%; line-height: normal; font-family: Arial, Helvetica, sans-serif; color: #aaaaad; background: #074e64; }
a { color: #FFF; }
a:hover { text-decoration: none; }

.container { margin: 0 auto; width: 800px; }

header { background: #FFF; height: 90px; margin: 0 0 25px 0; }

.middle { overflow: hidden; }
.middle>.container { overflow: hidden; }
.midLeft { float: left; width: 431px; background: url(../../images/cf_mini-site_midLeft_bg_001.png) no-repeat right; min-height: 550px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }
.content { color: #fff; font-size: 1.4em; padding: 25px 40px 0 20px; }

.content .heading1 { color: #fff; font-family: 'Oswald', 'oswaldbook', sans-serif; font-size: 2.5em; line-height: 1em; text-transform: uppercase; margin: 0 0 16px 0; }
.content .heading1 strong { display: block; color: #51d6f5; font-size: .8em; font-weight: normal; }
.content .heading2 { color: #51d6f5; font-family: 'Oswald', 'oswaldbook', sans-serif; font-size: 1.7em; line-height: 1em; text-transform: uppercase; margin: 0 0 16px 0; }
.content p { margin: 0 0 16px 0; }
.content .phone { color: #51d6f5; font-family: 'Oswald', 'oswaldbook', sans-serif; font-size: 1.14em; margin: 0 0 20px 0; }
.content hr { border: none; border-top: dashed 1px #adadad; margin: 35px 0; }

.content ol.square-numbers { counter-reset: li; font-family: 'Oswald', 'oswaldbook', sans-serif; padding: 3px 0 0 0; margin: 0 0 18px 0; }
.content ol.square-numbers > li { position: relative;  list-style: none; color: #fff; font-size: 1.43em; margin: 0 0 13px 54px; height: 37px; }
.content ol.square-numbers > li:before { content: counter(li); counter-increment: li; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; position:absolute; top: -6px; left: -54px; width: 37px; height: 37px; margin: 3px 8px 0 0; padding: 4px; color: #074e64; background: #51d6f5; font-weight: bold; font-family: "Helvetica Neue", Arial, sans-serif; text-align: center; font-size: 1.15em; }

.content ul { margin: 0 0 24px 24px; }
.content ul li { margin: 0 0 12px 0; }

.midRight { float: left; width: 369px; padding: 0 0 0 44px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

legend { display: none; }
::-webkit-input-placeholder { font-size: 0; }
:-moz-placeholder { /* Firefox 18- */ font-size: 0; }
::-moz-placeholder { /* Firefox 19+ */ font-size: 0; }
:-ms-input-placeholder { font-size: 0; }

.infoForm { padding: 21px 16px 21px 16px; min-width: 300px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.formTitle { font-size: 2.65em; color: #dfff04; margin: 0 0 18px 0; font-family: 'Oswald', 'oswaldbook', sans-serif; text-transform: uppercase; }
.formTitle .arrow-right { width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 16px solid #43d6f7; float: left; margin: 7px 6px 0 0; }

.infoForm .formLabel { color: #fff; font-size: 1.3em; margin: 0 0 6px 0;  }

.infoForm select, .infoForm input[type=text], .infoForm input[type=email] { background: #fff; height: 26px; width: 100%; border: none; box-shadow: 0 0 5px #999 inset;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.infoForm .form-group { margin: 0 0 6px 0; }
.infoForm .form-group-container { overflow: hidden; }
.infoForm .phone-group { width: 50%; float: left; padding: 0 6px 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.infoForm .zip-group { width: 50%; float: left; padding: 0 0 0 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.infoForm .formButton { display: block; background: url("../../images/cf_form_button_img_001.png") right center no-repeat #dfff04; color: #074f65; border: none; border-radius: 8px; font-size: 2em; padding: 0 20px 0 0; width: 234px; height: 39px; cursor: pointer; margin: 30px auto 10px auto; text-transform: uppercase; font-family: 'Oswald', 'oswaldbook', sans-serif; }
.infoForm .formButton:hover { background-color: #87ff04; }

.infoForm .formButton1 { display: block; background: url("../../images/cf_form_button_img_001.png") right center no-repeat #FFA604; color: #074f65; border-top: 4px solid #FFFEC0 ; border-right: 2px solid #FFFEC0 ; border-bottom: 2px solid #FFFEC0 ; border-left: 4px solid #FFFEC0 ; border-radius: 8px; font-size: 2em; padding: 0 20px 0 0; width: 87%; height: 39px; cursor: pointer; margin: 30px auto 10px auto; text-transform: uppercase; font-family: 'Oswald', 'oswaldbook', sans-serif; }
.infoForm .formButton1:hover { background-color: #FF8904; }
.cssButton_rectangle, .cssButton_roundedLow, .cssButton_roundedMed, .cssButton_roundedHigh {
	box-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 1px 0px inset;-webkit-box-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 1px 0px inset; -moz-box-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 1px 0px inset;/*We want a shadow on our button that is at the top and reasonably transparent. The first pixel value tells the browser how far left or right the shadow must be, the second value tells the browser how far to the top or bottom the shadow must be, and the third value tells the browser how big and blurred the shadow must be.*/
	border-width: 1px;/*This will cause the inset box shadow to recess a bit, which will make the button look glassier.*/
	border-style:solid;/*Well we don't want a dotted border!*/
	cursor:pointer;/*We want the cursor to be a 'hand'*/
	display:inline-block;/*Since we may be using anchor tags as our buttons, we should use the 'inline-block' display property. If we use 'block', you won't be able to have any text next to the button since it will take up the entire width of its parent. Using inline-block will make the button – when applied to a div or heading tag – expand to fill the entire width of its parent in IE7. Therefore, I have changed the display property to 'inline' in the IE7 conditional stylesheet (this stylesheet only applies to IE7 and below).*/
	line-height:normal;
	margin:30px auto 10px auto;/*These margins should be customized to suit your own needs. I've set them this way so it's easy to see all the buttons. The first value is top, second is right, third is bottom, and fourth is left.*/
	outline:none;
	overflow:visible;/*This is needed to make the popup tooltip visible (for tooltip buttons) and fixes a double padding problem in IE7.*/
	padding:0px 20px 0px 0px;/*Padding is absolutely crucial to the look of the button. Since we are setting the height and width to auto, we need padding to add some distance between the edge of the button and the text. The order of the values is the same as in margin - refer to the margin comment. IE 7 messes this up, so please refer to the IE7 conditional stylesheet and the documentation.*/
	position:relative;/*Just a general relative positioning - feel free to change this to whatever rocks your boat...*/
	text-align:center;/*Pretty self-explanatory.*/
	text-decoration:none;/*This gets rid of the underline when the button is used with an anchor tag.*/
	font-size: 2em; 
	width: 87%; 
	height: 39px; 
	text-transform: uppercase; 
	font-family: 'Oswald', 'oswaldbook', sans-serif;

	
}
.cssButton_rectangle:hover, .cssButton_rectangle:active, .cssButton_rectangle:focus, .cssButton_roundedLow:hover, .cssButton_roundedLow:active, .cssButton_roundedLow:focus, .cssButton_roundedMed:hover, .cssButton_roundedMed:active, .cssButton_roundedMed:focus, .cssButton_roundedHigh:hover, .cssButton_roundedHigh:active, .cssButton_roundedHigh:focus {/*These styles will get rid of outlines and text-decorations applied to anchor tags.*/
	outline:none;
	text-decoration:none;
}
.cssButton_rectangle {
	border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;/*Square corners*/
}
.cssButton_roundedLow {
	border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;/*Border-radius makes the corners rounded. A value of 0px is no rounding at all, and larger numbers like 60px is ridiculously round.*/
}
.cssButton_roundedMed {
	border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px;
}
.cssButton_roundedHigh {
	border-radius:40px; -webkit-border-radius:40px; -moz-border-radius:40px;
}

/*Orange*/
.cssButton_orange, .cssButton_orange:focus {
	background-color:#F60;/*If the gradient doesn't work for some reason, this is the fall-back. Gradients always override background color.*/
	background-image:-webkit-linear-gradient(top, #F80 0px, #F40 100%);/*This is the gradient for webkit browsers (Chrome, Safari). It's basically saying to "make a gradient, with the colour at the very top (a 0px distance from the top) being #F80, which will merge with the colour at the bottom, which is #F40."*/
	background-image:-moz-linear-gradient(top, #F80 0px, #F40 100%);/*This is the gradient for Mozilla Firefox.*/
	background-image:-o-linear-gradient(top, #F80 0px, #F40 100%);/*This is the gradient for Opera.*/
	background-image:-ms-linear-gradient(top, #F80 0px, #F40 100%);/*This is the gradient for Microsoft Internet Explorer.*/
	background-image:linear-gradient(top, #F80 0px, #F40 100%);/*This is the gradient for browsers which do not recognize the above and below borwser orientated gradients.*/
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorStr=#FF8800, endColorStr=#FF4400);/*Gradient for IE 6, 7, 9. This will destroy the border-radius property, so it's your choice: gradient or rounded corners? ;) */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF8800', endColorstr='#FF4400')";/*Gradient for IE 8. This also destroys border-radius.*/
	border-color:#F80;/*We want a reletively light border colour so it's not too noticeable.*/
	color:#FFFFFF;/*Text colour is a dark grey.*/
	text-shadow:0px 1px 5px #F90;/*This is a light text shadow. The first pixel value tells the browser how far left or right the shadow must be, the second value tells the browser how far to the top or bottom the shadow must be, and the third value tells the browser how big and blurred the shadow must be.*/
	
}
	.cssButton_orange:hover {/*When the orange button is hovered, add these styles...*/
		background-image:-webkit-linear-gradient(top, #F80 0px, #F80 100%);
		background-image:-moz-linear-gradient(top, #F80 0px, #F80 100%);
		background-image:-o-linear-gradient(top, #F80 0px, #F80 100%);
		background-image:-ms-linear-gradient(top, #F80 0px, #F80 100%);
		background-image:linear-gradient(top, #F80 0px, #F80 100%);
		filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorStr=#FF8800, endColorStr=#FF8800);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF8800', endColorstr='#FF8800')";
		background-color:#F80;
		
	}
	.cssButton_orange:active {/*When the orange button is clicked, add these styles...*/
		background-color:#F50;
		background-image:-webkit-linear-gradient(top, #F40 0px, #FA0 100%);
		background-image:-moz-linear-gradient(top, #F40 0px, #FA0 100%);
		background-image:-o-linear-gradient(top, #F40 0px, #FA0 100%);
		background-image:-ms-linear-gradient(top, #F40 0px, #FA0 100%);
		background-image:linear-gradient(top, #F40 0px, #FA0 100%);
		filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorStr=#FF4400, endColorStr=#FFAA00);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF4400', endColorstr='#FFAA00')";
	}
	
	.cssButton_icon_Left, .cssButton_growingIcon_Left, .cssButton_spinningIcon_360_Left, .cssButton_spinningIcon_270_Left, .cssButton_spinningIcon_180_Left, .cssButton_spinningIcon_90_Left, .cssButton_spinningIcon_45_Left {/*Add one of these classes to a span within your button to produce an icon to the left of the button text. You will have to specify the background image in the HTML span. Also, you will have to add a left padding to the button (by using inline CSS styling?) so that the icon doesn't overlap the text. The width, height, and margins may need to be customized to suit your button.*/
	background-color:transparent;
	background-position:center center;/*The background-icon will be placed to the centre (horizontally) and to the centre (vertically) of the container.*/
	background-repeat:no-repeat;/*We only want one icon background-image - not an infinite amount.*/
	background-size:contain;/*Do not let the icon image expand to be larger than the container. This does not work in IE8 and below.*/
	display:block;
	float:left;
	height:60%;
	left:10px;
	margin:0;
	overflow:hidden;
	padding:0;
	top:20%;
	position:absolute;
	width:30px;
}
.cssButton_icon_Right, .cssButton_growingIcon_Right, .cssButton_spinningIcon_360_Right, .cssButton_spinningIcon_270_Right, .cssButton_spinningIcon_180_Right, .cssButton_spinningIcon_90_Right, .cssButton_spinningIcon_45_Right {/*Styles applied to icons floated to the right of the button.*/
	background-color:transparent;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	display:block;
	float:right;
	height:60%;
	right:10px;
	margin:0;
	overflow:hidden;
	padding:0;
	top:20%;
	position:absolute;
	width:30px;
}



.infoForm .formPhone { text-align: center; font-family: 'Oswald', 'oswaldbook', sans-serif; font-size: 1.9em; color: #43d6f7; text-transform: uppercase; margin: 0 0 16px 0; }
.infoForm .formRequired { color: #dedede; font-style: italic; font-size: 1.1em; text-align: right; margin: 0 0 16px 0; }
.infoForm .formConsent { color: #dedede; font-style: italic; font-size: 1.1em; }

.infoForm .fieldError { border: solid 1px #F00 !important; }

iframe { background-color: #fff; }