/* ---------- General form elements ---------- */


/* The label is literally a label for a form element */
.ve_label {
width:100px;
margin:4px 10px 0 0;
float:left;
display:block;
text-align:right
}

/* The text field is a form element */
.ve_text {
width:300px;
padding:2px;
background:#FCFCFC;
border:#777 1px solid;
}

/* The button is a form element and also controls the execution of the form's function */
.ve_button {
width:150px;
margin:0 0 10px 0;
cursor:pointer;
font-weight:700
}

/* The list box is a form element */
.ve_listbox {
margin:0 0 5px 0;
float:left;
background:#FCFCFC;
border:#777 1px solid;
display:block
}

/* The file field is a form element */
.ve_fileField {}

/* The drop down list is a form element */
.ve_dropDownList {}

/* The field description provides a more in depth description or further instructions to the user about its element than the label can */
.ve_customFieldDescription {
margin:0 0 20px 110px; /* give the field description some space between it and the form element below it (top margin). also the left margin should match the width of the label + 10px to line it up with the other form elements  */
clear:both; /* this property ensures the field description and required validator are on different lines */
font-size:11px;
color:#666
}

/* The required validator is displayed if a required field is not filled out on form submittal */
.ve_requiredValidator {
float:left; /* this property ensures the required validator aligns with the edge of the form elements */
clear:left; /* this property also ensures the required validator aligns with the edge of the form elements */
color:red;
font-weight:700
}


/* The captcha image displays text for the form user to type in a field to ensure they're a human */
.ve_captchaimage {
margin:0 0 -9px 8px /* give the captcha image some space between it and the text field (left margin). also align the image up with the text field (negative bottom margin). */
}

/* The captcha text field is where you type in the characters displayed in the captcha image */
input._ve_capturetextbox {
width:4.4em !important; /* make the captcha text field 4 characters wide (multiply the size of the text inside the text field [in this case 1.1em] by 4). this is made !important to override the generic 300px width of text fields */
margin:0 0 5px 0 /* give the capture text field some space between it and the required validator if it's visible */
}

/* ---------- Form module ---------- */

/* This paragraph tag is the container for each individual form element */
.ve_formModule p { 
margin:0 0 5px 0
}

/* The label is literally a label for a form element */
.ve_formModule label.ve_label {}

/* The text field is a form element */
.ve_formModule input.ve_text {}

/* The text area is a form element */
.ve_formModule textarea.ve_text {
height:150px; /* give the text area a specific height */
font-family:Geneva, Arial, Helvetica, sans-serif; /* ensure any text typed inside the text area is of the specified family (this is a fix for firefox which doesn't inherit the font declared as a property of the body tag */
}

/* The button is a form element and also controls the execution of the form's function */
.ve_formButtons input.ve_button {
margin:0 0 10px 110px; /* give some space between the form's penultimate element and the button (top margin). also the left margin should match the width of the label + 10px to line it up with the other form elements */
}

/* The field description provides a more in depth description or further instructions to the user about its element than the label can */
.ve_formModule p.ve_customFieldDescription {
margin:0 0 20px 110px /* this is to stop the margin property being overwritten by form module p tag */
}

/* The required validator is displayed if a required field is not filled out on form submittal */
.ve_formModule span.ve_requiredValidator {}

/* The list box is a form element */
.ve_listbox {}

/* The captcha image displays text for the form user to type in a field to ensure they're a human */
.ve_captchaimage {}

/* The captcha text field is where you type in the characters displayed in the captcha image */
input._ve_capturetextbox {}

/* A check box list has to have its own container */
.ve_formModule p span {
margin:0 0 5px 110px; /* give some space between the check box list container and its field description. also give the container a left margin of the label width + 10px to ensure any check boxes that are below the label's height don't float to the edge of the form */
display:block /* this property allows the check box list to have margins */
}

/* The check box is a form element */
.ve_formModule p span input {
margin:0 8px 3px 0; /* give the check box some space between the element below it and its label to the right of it */
float:left; /* this property makes each check box and its label be on its own line */
display:block /* this property allows the check box to float and have margins */
}

/* The label for the checkbox */
.ve_formModule p span label {
margin:0 0 3px 0; /* give the label for the check box some space between it and the element below it (this bottom margin must match the check box's bottom margin) */
display:block /* this property also makes each check box and its label be on its own line */
}

/* ---------- Login module ---------- */

/* This paragraph tag is the container for each individual form element */
.ve_loginModule p {
margin:0 0 10px 0
}

/* This field set surrounds the form */
.ve_loginModule fieldset {
width:100%; /* prevents other modules from positioning themselves on the same line as the login module */
margin:0 0 10px 0;
border:none
}

/* This legend shows the name of the login module */
.ve_loginModule legend {
display:none
}

/* The label is literally a label for a form element */
.ve_loginModule label.ve_label {}

/* The text field is a form element */
.ve_loginModule input.ve_text {}

/* The button is a form element and also controls the execution of the form's function */
.ve_loginModule input.ve_loginButton {
width:150px;
margin:0 0 10px 110px; /* give some space between the form's penultimate element and the button (top margin). also the left margin should match the width of the label + 10px to line it up with the other form elements */
cursor:pointer;
font-weight:700
}

/* This controls the 'forgot password' link */
.ve_loginModule p a {
margin:0 0 0 110px /* the left margin should match the width of the label + 10px to line it up with the other form elements */
}

/* ---------- Logout module ---------- */

/* The button is a form element and also controls the execution of the form's function */
.logoutModule input.ve_button {
margin:0
}

/* ---------- Members account module ---------- */

/* This is the unordered list item container for account navigation */
.ve_accountModule ul.ve_accountNav {
display:inline; /* make the list elements display on one line */
list-style-type:none /* ensure the list items don't have bullets, or numbering, or whatever */
}

/* This controls links inside any list items for account navigation */
.ve_accountModule li a {
float:left; /* ensure the linked list elements are on one line */
margin:0 25px 0 0; /* give the list elements some spacing to the right */
display:block /* this property allows the linked list elements to have a margin and float */
}

/* This paragraph tag is the container for each individual form element */
.ve_accountModule p {
margin:0 0 10px 0 /* give the form elements some space in between them */
}

/* The label is literally a label for a form element */
.ve_accountModule label.ve_label {}

/* The text field is a form element */
.ve_accountModule input.ve_text {}

/* The button is a form element and also controls the execution of the form's function */
.ve_accountModule div.ve_formButtons input.ve_loginButton {
width:150px; /* give the button a specific width */
margin:0 0 10px 110px; /* give some space between the form's penultimate element and the button (top margin). also the left margin should match the label width + 10px */
cursor:pointer; /* make the mouse cursor a hand when it hovers over the button */
font-weight:700 /* embolden the text inside the button */
}

/* This controls the 'forgot password' link */
.ve_loginPanel p a {
margin:0 0 0 110px /* the left margin should match the width of the label + 10px to line it up with the other form elements */
}

/* ---------- Breadcrumb module ---------- */

#breadcrumb {
margin-left: 180px
}

#breadcrumb ul {
float:left
}

/* This controls the linked list elements in the breadcrumb */
#breadcrumb li {
display:inline;
margin:0
}

#breadcrumb li a {
padding:0 10px;
border-left:#000 solid 1px
}

#breadcrumb li a.first {
border-left:none
}

#breadcrumb li a:link, #breadcrumb li a:visited {
color:#000;
text-decoration:none
}

#breadcrumb li a:hover, #breadcrumb li a:active {
color:#000;
text-decoration:underline
}

/* ---------- Category filter module ---------- */

/* This is the unordered list item container for the category filter */
#ve_categoryFilterContainer ul {
list-style-type:none /* ensure the list items don't have bullets or numbers etc */
}

/* ---------- Forgot password module ---------- */

/* This paragraph tag is the container for each individual form element */
.ve_forgotPasswordModule p {
margin:0 0 10px 0 /* give the form elements some space in between them */
}

/* The button is a form element and also controls the execution of the form's function */
.ve_forgotPasswordModule input.ve_button {}

/* ---------- HTML search results module ---------- */

/* The button is a form element and also controls the execution of the form's function */
.ve_moduleContent.ve_button {
margin:0 0 0 10px
}

/* This paragraph tag is the container for each individual form element */
.htmlSearchResultsModule p {
margin:0 0 10px 0 /* give the form elements some space in between them */
}

/* This paragraph tags is the container for the search results  */
.htmlSearchResultsModule p.title {
margin:0 0 10px 0 /* give the search results some space at the top */
}

/* ---------- Ecommerce add to basket ---------- */

/*  */
.ve_addToBasket p#ve_quantityContainer {}

/* This paragraph tag is the container for each individual form element */
.ve_addToBasket p {
margin:0 0 10px 0 /* give the form elements some space in between them */
}

/* This field set surrounds the form */
.ve_addToBasket fieldset {
float:left; /* avoids clashing with elements above it that have a float property as well */
border:none /* hide the ugly field set border */
}

/* This legend shows the name of the login module */
.ve_addToBasket legend {
display:none /* hide the legend */
}

/* The text field is a form element */
.ve_addToBasket input.ve_text {
width:4.4em
}

/* The file field is a form element */
.ve_addToBasket input.ve_fileField {}

/* The drop down list is a form element */
.ve_addToBasket select.ve_dropDownList {}

/* The list box is a form element */
.ve_addToBasket select.ve_listbox {}

/* The button is a form element and also controls the execution of the form's function */
.ve_addToBasket input.ve_button {
margin:0 /* ensure the button has no extra space around it */
}

/* The field description provides a more in depth description or further instructions to the user about its element than the label can */
.ve_addToBasket p.ve_customFieldDescription {}

/* The required validator is displayed if a required field is not filled out on form submittal */
.ve_addToBasket span.ve_requiredValidator {}

/* A check box list has to have its own container because it's a nightmare */
..ve_checkoutPanels p span {
margin:0 0 5px 110px; /* give some space between the check box list container and its field description. also give the container a left margin of the label width + 10px to ensure any check boxes that are below the label's height don't float to the edge of the form */
display:block /* this property allows the check box list to have margins */
}

/* The check box is a form element */
.ve_checkoutPanels p span input {
margin:0 8px 3px 0; /* give the check box some space between the element below it and its label to the right of it */
float:left; /* this property makes each check box and its label be on its own line */
display:block /* this property allows the check box to float and have margins */
}

/* The label for the checkbox */
.ve_checkoutPanels p span label {
margin:0 0 3px 0; /* give the label for the check box some space between it and the element below it (this bottom margin must match the check box's bottom margin) */
display:block /* this property also makes each check box and its label be on its own line */
}

/* The container for  the address confirmation, billing address confirmation and the payment details confirmation */
.ve_deliveryAddressConfirmation, .ve_billingAddressConfirmation, .ve_paymentDetailsConfirmation {
margin:0 0 10px 0
}

/* The container for  the address */
.ve_address {
margin:0 0 0 22px /* give the address container some space to the left */
}

/* The container for the order summary confirmation */
.ve_orderSummaryConfirmation th {
text-align:left /* makes the text inside the order summary confirmation column align to the left */
}

/* The check out panels error is displayed if there is an error */
.something {
width:100%; /* makes width of the check out panel error 100% of its parent */
color:red /* makes the text inside the check out panel error red */
}

.ve_addressForm.ve_select {
margin:0 100px 0 0
}

.ve_formButtons input.ve_button {
margin:0
}