/*
Welcome to Custom CSS!

CSS (Cascading Style Sheets) is a kind of code that tells the browser how
to render a web page. You may delete these comments and get started with
your customizations.

By default, your stylesheet will be loaded after the theme stylesheets,
which means that your rules can take precedence and override the theme CSS
rules. Just write here what you want to change, you don't need to copy all
your theme's stylesheet content.
*/
/*
--------------------------------------------------------
gf_madlib.css
Gravity Forms Mad Lib Form Demo Styles
updated October 16, 2010
https://www.gravityforms.com
a rocketgenius project
copyright 2010 rocketgenius llc.
https://www.rocketgenius.com
https://www.rocketgenius.com/mad-lib-style-form-demo/
--------------------------------------------------------
*/
/* some basic content styles since we're not loading any from the theme for the demo */
/*body,td,p,input,select,textarea {
	color: #424242;
	font-size: 18px;
	font-family: Helvetica, arial, sans-serif;
}*/
body {
	background-color: #DFEFFF;
	background-image: url(https://dl.dropbox.com/u/688846/gravityhelp/sampleimages/bubbles_bg.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0;
}

/* redefine the form wrapper - just for nicer styling - note: for your form, change gform_wrapper_2 to your actual form wrapper ID */
body #gform_wrapper_2.gform_wrapper {
	max-width: 99%!important;
	width: 900px;
	min-width: 880px;
	margin: 50px auto;
	border: 1px solid #fff;
	background-color: #fff;
	padding: 30px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-khtml-border-radius: 8px;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	position: relative;
	overflow: visible!important;
	background-image: url(https://dl.dropbox.com/u/688846/gravityhelp/sampleimages/topgradient.png);
	background-repeat: repeat-x;
	background-position: 0 0;
}

/* style the form heading */
body #gform_wrapper_2.gform_wrapper form.madlibform .gform_heading {
	background-image: url(https://dl.dropbox.com/u/688846/gravityhelp/sampleimages/divider.png);
	background-repeat: repeat-x;
	background-position: 50% 100%;
	padding-bottom: 60px;
	margin: 35px 0 10px;
}

body #gform_wrapper_2.gform_wrapper form.madlibform .gform_heading span.gform_description {
	line-height: 1.5;
	font-size: 22px;
	color: #21759B;
}

/* make all the list items with the madlibstyle class display inline */
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.gfield_html,
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle {
	display: -moz-inline-stack;
	display: inline-block;
	zoom: 1;
	width: auto!important;
	height: 40px;
	margin-right: 5px;
	line-height: 40px;
}

/* hide the labels, descriptions & validation messages - don't need them here */
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle label,
body #gform_wrapper_2.gform_wrapper form.madlibform div.gfield_description,
body #gform_wrapper_2.gform_wrapper form.madlibform div.validation_message {
	display: none;
}

/* change the input styles for these fields */
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type=text],
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type=email],
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type=password],
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type=url],
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type=tel] {
	margin-top: 4px;
	border-top: none;
	border-right: none;
	border-bottom: 1px dashed #c2c2c2;
	border-left: none;
	background-color: #fff;
	width: 98%;
	font-size: 18px;
	color: #21759B;
}

body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle select {
	width: 98%;
	font-size: 15px;
	padding-right: 5px;
}

/* tweak the time fields for our purposes */
body #gform_wrapper_2.gform_wrapper form.madlibform #field_2_16.gfield.madlibstyle {
	width: 100px!important;
}

/* a few new rules for the inputs if it's an error */
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.gfield_error.madlibstyle input[type=text],
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.gfield_error.madlibstyle input[type=email],
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.gfield_error.madlibstyle input[type=password],
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.gfield_error.madlibstyle input[type=url],
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.gfield_error.madlibstyle input[type=tel] {
	padding: 0!important;
	margin-top: 7px;
	width: 96%;
}

/* revised error styles */
body #gform_wrapper_2.gform_wrapper form.madlibform .gform_body .gform_fields .gfield.gfield_error.madlibstyle {
	border: none;
	padding: 0!important;
	background-color: transparent!important;
	margin-top: 0!important;
	margin-bottom: 0!important;
}

body #gform_wrapper_2.gform_wrapper form.madlibform .gform_body .gform_fields .gfield.gfield_error.madlibstyle input {
	border-top: none;
	border-right: none;
	border-bottom: 1px dashed #DA5712;
	border-left: none;
	background-image: url(https://dl.dropbox.com/u/688846/gravityhelp/sampleimages/bang.png);
	background-repeat: no-repeat;
	background-position: 98% 50%;
}

body #gform_wrapper_2.gform_wrapper form.madlibform .gform_body .gform_fields .gfield.gfield_error.madlibstyle input:focus {
	border-bottom: 1px dashed #c2c2c2;
}

body #gform_wrapper_2.gform_wrapper form.madlibform div.validation_error {
	font-size: 24px;
	text-shadow: 1px 1px 1px #fff;
	color: #DA5712!important;
}

/* now make the confirmation message a little spiffier */
div#gforms_confirmation_message {
	width: 900px;
	margin: 40px auto;
	font-size: 24px;
	text-shadow: 1px 1px 1px #fff;
	color: #21759B!important;
	background-color: #fff!important;
	border: 1px solid #fff!important;
	letter-spacing: -.4pt;
	line-height: 1.8;
	padding: 40px 30px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-khtml-border-radius: 8px;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	background-image: url(https://dl.dropbox.com/u/688846/gravityhelp/sampleimages/topgradient.png);
	background-repeat: repeat-x;
	background-position: 0 0;
}

div#gforms_confirmation_message span.highlight {
	color: #DA5712;
}

div#gforms_confirmation_message div.with_emphasis {
	font-size: 36px;
	margin: 20px 0 0;
	font-family: Georgia, serif;
}

/* super duper extra fabulous form button and title styles */
#gform_wrapper_2.gform_wrapper form.madlibform .gform_footer input.button,
#gform_wrapper_2.gform_wrapper form.madlibform .gform_heading h3.gform_title {
	background-color: #CC500F;
	display: inline-block;
	padding: 12px 18px;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	line-height: 1;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
	border: 1px none #222;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	letter-spacing: .4pt;
	word-spacing: -1pt;
	font-size: 36px;
	background-image: url(https://dl.dropbox.com/u/688846/gravityhelp/sampleimages/orange-button-overlay.png);
	background-repeat: repeat-x;
	background-position: 0 0;
	letter-spacing: -.4pt;
	font-family: Georgia, serif;
}

/* position the button */
#gform_wrapper_2.gform_wrapper form.madlibform .gform_footer input.button {
	position: absolute;
	bottom: -30px;
	right: 28px;
	cursor: pointer;
}

/* other title styles */
#gform_wrapper_2.gform_wrapper form.madlibform .gform_heading h3.gform_title {
	position: absolute;
	top: -40px;
	left: 28px;
	width: auto!important;
}

/* browser specific styles based on body class - don't use it? You should.. https://www.wprecipes.com/how-to-detect-the-visitor-browser-within-wordpress */
body.safari #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle select,
body.chrome #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle select {
	color: #424242;
	font-size: 18px;
	font-family: Helvetica, arial, sans-serif;
}

body.safari #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle select#input_2_4,
body.chrome #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle select#input_2_4 {
	width: 135px;
}

body.safari #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle select#input_2_17,
body.chrome #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle select#input_2_17 {
	width: 55px;
}

body.gecko #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle select {
	margin: 4px 0 0!important;
}

body.gecko #gform_wrapper_2.gform_wrapper form.madlibform .gform_footer input.button {
	padding: 8px 18px;
}

body.safari #gform_wrapper_2.gform_wrapper form.madlibform div.validation_message,
body.ie #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle select {
	padding: 0!important;
	margin: 7px 0 0!important;
}