Narrow Two Column Widget

n2c-widget.css

/* -----------------
Widget Widths
---------------------*/
.full_page_form {
	padding: 6px 6px !important;
}
/* Sets width of widget */
.full_widget_wrap #widget {
width: 475px !important;
}
/* Sets width of columns */
.col_1 {
width: 180px;
}
.col_2 {
width: 260px;
}
/* -----------------
Borders / Title / Intro Copy
---------------------*/
#full_page_header {
/*display:none;*/  /* <----Uncomment display:none; to hide the intro text. */
}
.widget_intro {
	/*display:none;*/  /* <----Uncomment display:none; to hide the intro text. */
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #E1DEDE;
	border-left: none;
}
/* Changes border style of widget */
.full_page_form {
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #E1DEDE;
	border-left: none;
}
/* -----------------
Personal Information 
---------------------*/
/* Adjusts style of contact information text fields */
.step2 input[type=text] {
	width: 150px !important;
	height: 30px;
	-webkit-border-radius: 4px; 
	-moz-border-radius: 4px; 
	border-radius: 4px; 
	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
	box-shadow:  inset 0 1px 3px rgba(0, 0, 0, 0.1);
	border: 1px solid #CCC;
}

/* -----------------
Donation Amounts
---------------------*/
/* Changes the style of the Donation Amounts container.  This is the box that contains the donation abouts. */
.donate_amounts {
border: 1px solid #d4d4d4;
padding: 4px;
font-size: 13px;
font-weight:bold;
background: #FAFAFA;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}


/* Changes the style of the Donation Amounts.  Change these to suit your needs. */
.donate_amounts li {
background-color: #23485B;
background-repeat: repeat-x;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
border: 1px solid #B2B2B2;
color: white;
display: block;
float: left;
height: 46px;
line-height: 18px;
min-width: 100px;
padding: 8px 5px 8px 5px;
text-align: center;
width: 60px;
border-image: initial;
margin: 6px;
/* Gradients are used for the donation amounts here.  These cover all browsers except IE.  Background color attribute will be used for Internet Explorer. */	
background-image: -khtml-gradient(linear,left top,left bottom,from(
#2A5A73),to(#23485B)); 
background-image: -moz-linear-gradient(#2A5A73, #23485B);
background-image: -ms-linear-gradient(#2A5A73, #23485B);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,
#2A5A73),color-stop(100%, #23485B));
background-image: -webkit-linear-gradient( #2A5A73, #23485B);
background-image: -o-linear-gradient(#2A5A73, #23485B);
background-image: linear-gradient(#2A5A73, #23485B);
}
/* Adjusts placement of radio button within box. */
.donate_amounts input[type=radio] {
margin-top:20px;
}
/* Adjusts style and placement of "Other" text. */
.step1 .infield label {
color: grey;
left: 40px;
padding-top: 26px;
}

/* Adjusts the Width of the "Other" field. Only use if you adjust donation amount box sizes*/
/*.donate_amounts input[type=text] {
	width: 40px !important;
}
*/

/* -----------------
Payment Information 
---------------------*/
/* Adjusts style of payment information fields */
.cc_info input{
height: 24px;
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow:  inset 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #CCC;
padding-right: 30px;
}

.step2 label, .step3 .infield label {
padding: 10px 0 2px 7px;
}


/* Adjusts size and style of the drop down selections. */
select {
height: 30px;
padding: 4px;
border: 1px solid #CCC;
color: #626262;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 12px;
font-family: Helvetica, Arial, sans-serif;
margin: 2px 0px;
line-height: 18px;
background-color: whiteSmoke;
}

/* -----------------
Footer
---------------------*/
/* Removes border from footer*/
.FullPage #sidebarFooter {
	border: none;  
}

/* Adjusts placement of WidgetMakr Logo*/
.widgetmakr_logo {
	margin-top: 40px !important;  
}
/* Adjusts placement of TrustWave Logo*/
.trustwave_logo {
margin-top: 30px
}
/* -----------------
Submit Button
---------------------*/
.submit_payment {
	/* This sets the clickable size of the Submit Button*/
	height: 26px;
	width: 70px;
}
.blue_submit, .ghost_submit {
	/*--background: url(https://ImageUrlGoesHere.com) no-repeat scroll right center transparent !important; --*| /* You can set a new image to use for your submit button here, if you wish.  Just be sure to uncomment this line*/
	border: none;
}