/********************
*  READ EVERY BIT OF THIS. DO NOT SKIP OUT ON THE INSTRUCTIONS!!!!!!
*********************
*  All of the CSS below applies to the three optin forms. The CSS is
*  written so that the three forms can share as much CSS as possible.
*  If you choose to use only one or two of the forms, they will still
*  be styled properly. If you understand CSS well, you can delete the
*  CSS that applies to the forms you are not using. 
*********************
*  Simply place the CSS below into the CSS file for your website. If
*  you are using WordPress, your theme should have an editable style-
*  sheet. Place the CSS there.
*********************
*  The images referenced in this file are located in a folder called
*  "images" in the same folder as this CSS file. If you would like to 
*  switch out any of the images (background, bullets), simply place 
*  your new images in the "images" folder with the same names and over-
*  write the default images. When you are satisfied, upload your images
*  to your server and replace the relative URLs in the CSS with the new
*  URLs of your hosted images.
*********************
*  To change the button designs, which are written in CSS (they are not
*  images), use this awesome tool: http://www.colorzilla.com/gradient-editor/
*  and create your own gradient. Once created, copy the provided CSS and
*  paste it in the place of the original -- #optin_wrapper input[type="submit"] -- 
*  BACKGROUND properties. ONLY replace the lines that start with "background:"!
*/

/* Optin form containers */
#optin_wrapper { 
	color: #111;
	background: url(images/grid.png); /* Replace URL with new URL of uploaded image */
	text-shadow: 1px 1px white;
	padding: 1.8em;
	margin-bottom: 1em;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0,0,0,.2) inset;
}
	#optin_wrapper.sidebar_form { /* Sidebar */
		max-width: 350px;
		min-width: 120x;
	}
	#optin_wrapper.post_footer_form { /* Post Footer */
		max-width: 750px;
		min-width: 450px;
	}
	#optin_wrapper.feature_form { /* Feature */
		padding: 1.8em 2em;
		min-width: 750px;
	}
#optin_wrapper p {
	margin-top: 0; 
}
#optin_wrapper h3 {
	font-size: 1.5em;
	line-height: 1.2em;
	margin: 0 0 .8em; 
}
	#optin_wrapper.feature_form h3 {
		font-size: 1.8em;
	}
#optin_wrapper h4 {
	margin-top: 0; 
}

/* Left side content of the Feature optin form */
#optin_wrapper .content_left {
	float: left;
	width: 55%;
	margin-right: 3%;
}
	#optin_wrapper .content_left ul li {
		list-style-image: url(images/bullet.png); /* Replace URL with new URL of uploaded image */
		padding: .6em 0;
		border-bottom: 1px dashed rgba(0,0,0,.1);
	}
	#optin_wrapper .content_left ul li:first-child {
		padding-top: 0;
	}
	#optin_wrapper .content_left ul li:last-child {
		border: 0;
	}
	
/* Container for the actual form on the Feature optin form */
#optin_wrapper .form_wrapper {
	background: url(images/vert-separator.png) no-repeat -1em 0; /* Replace URL with new URL of uploaded image */
	float: left;
	padding-left: 9%;
	width: 25%;
}

/* From elements - Name, Email, and Submit Button */
#optin_wrapper input {
	padding: .6em 1em;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0,0,0,.2);
}
	#optin_wrapper.sidebar_form input[type="text"],
	#optin_wrapper.sidebar_form input[type="email"],
	#optin_wrapper.sidebar_form input[type="password"] {
		margin-bottom: 1em;
		width: 87%;
	}
	#optin_wrapper.post_footer_form input[type="text"],
	#optin_wrapper.post_footer_form input[type="email"],
	#optin_wrapper.post_footer_form input[type="password"] {
		width: 27%;
	}
	#optin_wrapper.feature_form input[type="text"],
	#optin_wrapper.feature_form input[type="email"],
	#optin_wrapper.feature_form input[type="password"] {
		margin-bottom: 1em;
		width: 95%;
		min-width: 130px;
	}
#optin_wrapper select {
	padding: .6em 1em;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0,0,0,.2);
	margin-bottom: 1em;
	width: 97%;
}
#optin_wrapper input[type="submit"] {
	color: #fff;
	font-weight: bold;
	text-shadow: 0 -1px 1px rgba(170,105,23,.6);
	border: 1px solid rgba(0,0,0,.2);
	background: #356aa0;
	background: -moz-linear-gradient(top,  #356aa0 0%, #274c72 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#356aa0), color-stop(100%,#274c72));
	background: -webkit-linear-gradient(top,  #356aa0 0%,#274c72 100%);
	background: -o-linear-gradient(top,  #356aa0 0%,#274c72 100%);
	background: -ms-linear-gradient(top,  #356aa0 0%,#274c72 100%);
	background: linear-gradient(to bottom,  #356aa0 0%,#274c72 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#356aa0', endColorstr='#274c72',GradientType=0 );
}

#optin_wrapper input[type="submit"]:hover {
	opacity: .8;
}