/* BEGIN AVELLAN LAYOUT */

.qtyField {
   width:60px !important;
}

/* Custom Header */
div.ae-header {
    text-align:center;
}

.ae-banner {
    display:block;
    margin: 0px auto 20px;
}

/* Custom Footer */
.imagesfooter {
    text-align:center;
    margin:10px auto 10px;
}

div.ae-footer {
    text-align:center;
}

div.ae-footer ul {
    margin: 0px; 
    padding: 0px;
}

div.ae-footer ul li {
    display: inline; 
    padding: 0px 10px;
}

.ordertext {
    color:black;
    text-align:center;
    margin-bottom:30px;
}

/* Responsive Images */
img {
    max-width:100%
}

/* Product Information */
#productInformation {
    padding:10px;
    margin:15px 0px;
}

.product-videoplayer {
    width:330px;
    height:203px;
    display:block;
    margin:20px auto;
}

/* END AVELLAN LAYOUT */


/* Layout: One Column
Theme: Graphite


Layout.css contains the layout properties for your order form,
including width, height, margin, padding, position, float,
display and text-align.


NOTE: There are additional classes that are not listed here
because they currently have no attributes. You can locate
these by downloading and using Firebug.
================================================== =============*/


body {
margin: 0;
}


/* HTML5 display definitions
================================================== ======================== */


/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/


article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}


/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/


audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}


/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/


audio:not([controls]) {
display: none;
height: 0;
}


/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/


[hidden],
template {
display: none;
}


/* Links
================================================== ======================== */


/**
* Remove the gray background color from active links in IE 10.
*/


a {
background-color: transparent;
}


/**
* Improve readability when focused and also mouse hovered in all browsers.
*/


a:active,
a:hover {
outline: 0;
}


/* Text-level semantics
================================================== ======================== */


/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/


abbr[title] {
border-bottom: 1px dotted;
}


/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/


b,
strong {
font-weight: bold;
}


/**
* Address styling not present in Safari and Chrome.
*/


dfn {
font-style: italic;
}


/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/


h1 {
font-size: 2em;
margin: 0.67em 0;
}


/**
* Address styling not present in IE 8/9.
*/


mark {
background: #ff0;
color: #000;
}


/**
* Address inconsistent and variable font size in all browsers.
*/


small {
font-size: 80%;
}


/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/


sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}


sup {
top: -0.5em;
}


sub {
bottom: -0.25em;
}


/* Embedded content
================================================== ======================== */


/**
* Remove border when inside `a` element in IE 8/9/10.
*/


img {
border: 0;
}


/**
* Correct overflow not hidden in IE 9/10/11.
*/


svg:not(:root) {
overflow: hidden;
}


/* Grouping content
================================================== ======================== */


/**
* Address margin not present in IE 8/9 and Safari.
*/


figure {
margin: 1em 40px;
}


/**
* Address differences between Firefox and other browsers.
*/


hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}


/**
* Contain overflow in all browsers.
*/


pre {
overflow: auto;
}


/**
* Address odd `em`-unit font size rendering in all browsers.
*/


code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}


/* Forms
================================================== ======================== */


/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/


/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/


button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}


/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/


button {
overflow: visible;
}


/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/


button,
select {
text-transform: none;
}


/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/


button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}


/**
* Re-set default cursor for disabled elements.
*/


button[disabled],
html input[disabled] {
cursor: default;
}


/**
* Remove inner padding and border in Firefox 4+.
*/


button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}


/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/


input {
line-height: normal;
}


/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/


input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}


/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/


input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}


/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/


input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}


/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/


input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}


/**
* Define consistent border, margin, and padding.
*/


fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}


/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/


legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}


/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/


textarea {
overflow: auto;
}


/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/


optgroup {
font-weight: bold;
}


/* Tables
================================================== ======================== */


/**
* Remove most spacing between table cells.
*/


table {
border-collapse: collapse;
border-spacing: 0;
}


td,
th {
padding: 0;
}






html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: Arial;
font-size: 14px;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline; }


html {
font-size: 62.5%;
/* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
overflow-y: scroll;
/* Keeps page centered in all browsers regardless of content height */
-webkit-text-size-adjust: 100%;
/* Prevents iOS text size adjust after orientation change, without disabling user zoom */
-ms-text-size-adjust: 100%;
/* http://www.456bereastreet.com/archiv...ing_user_zoom/ */ }


*,
*:before,
*:after {
/* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-si...order-box-ftw/ */
-webkit-box-sizing: border-box;
/* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
-moz-box-sizing: border-box;
/* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
box-sizing: border-box; }


article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
display: block; }


ol, ul {
list-style: none; }


table {
/* tables still need 'cellspacing="0"' in the markup */
border-collapse: separate;
border-spacing: 0; }


caption, th, td {
font-weight: normal;
text-align: left; }


blockquote:before, blockquote:after,
q:before, q:after {
content: ""; }


blockquote, q {
quotes: "" ""; }


a:focus {
outline: thin dotted; }


a:hover,
a:active {
outline: 0; }


a img {
border: 0; }


/*--------------------------------------------------------------
1.0 - Reset End
--------------------------------------------------------------*/




* {
margin: 0;
padding: 0;
}


#wrapper {
/* Wraps around everything and sets the total width of the order form */
position: relative;
width: 1150px;
margin: 20px auto 40px auto;
padding: 10px 10px 60px 10px;
}


#header {
/* The top area that contains your banner or logo */
width: 1130px;
}


#content {
/* Content wrapper */
position: relative;
width: 1130px;
margin: 0 auto;
}






/* PRODUCT GRID
================================================== =============*/


.productImage {
/* Image in the product grid */
margin: 8px 0 10px 0;
border: 1px solid #eee;
}


.price {
/* Price in the right column of the product grid */
display: block;
}


.productDescription {
/* Paragraph for short product description */
margin-bottom: 13px;
}


.optionsDrop {
/* Dropdown for product options */
padding: 4px 4px 4px 6px;
margin-bottom: 13px;
width: 200px;
line-break-after: right;
}


.subscriptionPlan {
display: block;
}


.qtyField {
/* Quantity field in product grid */
padding: 4px 4px 4px 6px;
width: 30px;
display: block;
text-align: right;
margin: 0 auto;
margin-bottom: 5px;
}






/* HTML AREAS (Insert custom HTML by going to the HTML area tab)
================================================== =============*/


#topCustomHTML {
/* HTML area below header image. */
margin: 35px 0 15px 0;
}


#middleCustomHTML {
/* HTML area below product grid. */
margin: 35px 0 60px 0;
clear: both;
}


#bottomCustomHTML {
/* This is your footer. */
width: 1130px;
margin: 40px auto 20px auto;
padding: 15px;
text-align: center;
clear: both;
}






/* FORMS
================================================== =============*/


input {
margin: 0 0 7px 0;
}


.paymentLabel {
/* Labels for payment method table */
display: block;
}


.choosePlan {
/* Radio buttons used to choose pay plan or shipping option */
margin-right: 5px;
}






/* Form fields and labels
---------------------------------------------*/


.checkout, .checkoutDone {
/* Form fields used in checkout forms */
padding: 4px 4px 4px 6px;
margin: 0;
width: 100%;
max-width: 230px;
}


.checkoutBottom, .checkoutBottomDone {
/* Provides bottom padding for last form field in a form */
padding: 4px 4px 4px 6px;
margin: 0 0 20px 0;
width: 100%;
max-width: 230px;
}


.checkoutTop, .checkoutTopDone {
/* Provides top padding for first form field in a form */
padding: 4px 4px 4px 6px;
margin: 10px 0 0 0;
width: 100%;
max-width: 230px;
}


.checkoutLabel {
/* Checkout form label */
padding: 0 0 -3px 0;
margin: 0 0 -3px 0;
}


.checkoutShort, .promoField {
/* Smaller form field */
padding: 4px;
margin: 0;
width: 135px;
}


.promoLabel {
padding-top: 3px;
}


.checkoutShortest {
/* Even smaller form field */
padding: 5px;
margin: 0;
/* width: 70px; */
}


.addressTableInfo {
margin-bottom: 0px;
}


.paymentIcon {
/* Credit card, pay pal and check icons in payment information table */
margin: 0 7px -5px 4px;
}






/* Tables
---------------------------------------------*/


.viewCart {
width: 100%;
border-collapse: collapse;
margin: 20px 0 20px 0;
float: left;
border-radius: 4px;
}


.viewCart th, .billingTable th, .shippingTable th, .shipMethodTable th, .paymentMethodTable th, .payplanTable th, .orderSummary th {
padding: 10px 10px 10px 15px;
text-align: left;
}


.viewCart td, .shipMethodTable td, .paymentMethodTable td, .payplanTable td, .orderSummary td {
padding: 10px 10px 10px 15px;
vertical-align: top;
}


.billingTable td, .shippingTable td {
padding: 8px 0 0 15px;
vertical-align: top;
}


.billingTable {
/* Table for entering billing address */
width: 47%;
border-collapse: collapse;
margin: 0 20px 20px 0;
text-align: left;
float: left;
height: 500px;
}


.shippingTable {
/* Table for entering shipping address */
width: 50%;
border-collapse: collapse;
margin: 0 0 20px 0;
text-align: left;
float: right;
height: 500px;
}


.orderSummary {
/* Table for order form summary */
position: relative;
width: 50%;
border-collapse: collapse;
margin-bottom: 20px;
text-align: left;
float: right;
clear: right;
}


.shipMethodTable {
/* Table for shipping options */
width: 47%;
border-collapse: collapse;
margin-bottom: 20px;
margin-right: 20px;
text-align: left;
float: left;
clear: left;
}


.payplanTable {
/* Table for choosing pay plan */
width: 355px;
border-collapse: collapse;
margin-bottom: 20px;
text-align: left;
float: left;
}


#shipPaymentContainer {
width: 355px;
float: left;
}


.tableOption { /**/
/* Paragraph for shipping or pay plan option */
margin: 0 0 11px 0;
}


.payplanSummary { /* Box that shows payment schedule for payment plan */
background-color: #fff;
width: 200px;
margin: -12px 0 15px 0;
}


.paymentDate { /* Date shown in .paypanSummary box */
width: 100px;
display: inline-block;
border-bottom: 1px dashed #ddd;
}


.paymentAmount { /* Payment amount shown in .paypanSummary box */
width: 65px;
text-align: right;
display: inline-block;
border-bottom: 1px dashed #ddd;
}


.financeDate { /* Finance charge label shown in .paypanSummary box */
color: #777;
font-style: italic;
width: 100px;
display: inline-block;
}


.financeAmount { /* Finance charge amount shown in .paypanSummary box */
color: #777;
font-style: italic;
width: 65px;
text-align: right;
display: inline-block;
}


.promoCode {
/* Table for promo code field */
width: 453px;
border-collapse: collapse;
margin-left: 15px;
}


.promoCode td {
height: 30px;
}


.paymentMethodTable {
/* Table for entering payment method */
width: 100%;
border-collapse: collapse;
margin: 20px 0 20px 0;
text-align: left;
float: left;
}


td.pay1 {
/* First column in .paymentMethodTable */
width: 50%;
padding-bottom: 20px;
}


td.pay2 {
/* First column in .paymentMethodTable */
width: 50%;
padding-bottom: 20px;
}


td.pay3 {
/* First column in .paymentMethodTable */
width: 50%;
padding-bottom: 20px;
}


td.pay4 {
/* First column in .paymentMethodTable */
padding-bottom: 20px;
}


td.rightAlign {
text-align: right;
vertical-align: top;
padding-top: 10px;
height: 20px;
}


th.rightAlign {
text-align: right;
}


th.rightAlignTop {
text-align: right;
vertical-align: top;
padding-top: 20px;
width: 150px;
}


td.rightAlignTop {
text-align: right;
padding-top: 20px;
width: 150px;
height: 20px;
}


td.rightAlignBottom {
text-align: right;
vertical-align: top;
padding: 10px 10px 20px 0;
width: 150px;
}


th.leftAlign {
text-align: left;
height: 15px;
}


td.leftAlign {
text-align: left;
}


td.centerAlign, th.centerAlign {
text-align: center;
}


td .rightCell {
text-align: right;
}


.productCell {
width: 80%; !important
}


.qtyCell {
width: 10%; !important
}


.priceCell {
width: 10%; !important
}


.checkoutLinks {
/* Container for 'Checkout' and 'Continue Shopping' buttons */
/* width: 350px; */
height: 30px;
margin: 0 0 40px;
text-align: center;
float: right;
clear: both;
}



/* UPSELLS
================================================== =============*/


#upsellContainer {
/* Contains all upsells */
width: 1130px;
margin-bottom: 60px;
clear: both;
}


.upsell {
/* Box that contains single upsell */
width: 283px;
float: left;
margin: 0 10px 20px 0;
padding: 10px 10px 12px 15px;
}


.upsellImage {
float: left;
margin: 6px 15px 0 0;
}


.upsellItem {
/* Product name */
font-weight: bold;
margin-right: 10px;
}


.upsellAdd {
/* Add to cart button for upsells */
float: right;
margin: 7px 7px 0 0;
}


.upsellPrice {
margin-left: 9px;
}






/* TYPOGRAPHY
================================================== =============*/


h1 {
/* Used for product names */
margin: 2px 0 2px 0;
}


h2 {
/* Used for upsell product names */
margin-right: 10px;
display: inline;
}


#upsellContainer h2 {
/* Used for upsell product names */
margin: 5px 12px 0 0;
display: inline-block;
}


h3 {
/* Used for upsell headline */
margin: 0 0 5px 0;
padding-bottom: 3px;
}






/* LINKS AND BUTTONS
================================================== =============*/


a {
text-decoration: none;
}


a:hover {
text-decoration: underline;
}


.codeButton, .continueButton {
padding: 3px 15px 4px 15px;
margin: 0 0 0 15px;
cursor: pointer;
}


.upsellButton {
margin: 0 0 0 1px;
padding: 1px 8px 4px 8px;
cursor: pointer;
}



@media all and (max-width: 1150px) {
#wrapper{
width:97%;
}

#header{
width: 100%;
}

#content{
width: 100%;
}

.billingTable, .shippingTable, .shipMethodTable, .orderSummary, .shipMethodTable {
width: 47%;
}

.paymentMethodTable{
width:100%;
}
.payplanTable{
width:100%;
}
}


@media all and (max-width: 870px) {
.billingTable, .shippingTable{
width: 100%;
}
}


@media all and (max-width: 746px) {
.shipMethodTable, .orderSummary {
width: 100%;
}
#paymentSelection{
display: block;
overflow-x: scroll;
}

#paymentSelection .pay1, #paymentSelection .pay2, #paymentSelection .pay3, #paymentSelection .pay4{
display:block!important;
width: 90%;
}

#paymentSelection tbody{
display:block;
width:100%;
}

#paymentSelection tr{
display:block;
width:100%;
}

#paymentSelection th{
display:block;
width: calc(100%-25px);
height:45px;
}


#wrapper{
padding: 10px 10px 60px;
}

}


@media all and (max-width: 564px) {

.viewCart, .viewCart thead, .viewCart tbody, .viewCart th, .viewCart tr:not(:last-of-type) td, .viewCart tr:not(:last-of-type) {
display: block;
}
.viewCart{
border-collapse: collapse;
}

.viewCart tr{
position:relative;
}

/* Make the Pricing Table look Normal */
.viewCart th.priceCell, .viewCart th.qtyCell {
    display:none;
}

.choosePlan {
    /* Radio buttons used to choose pay plan or shipping option */
    margin-right: 0px;
}

.payplanTable th, .payplanTable td, .paymentMethodTable td{
    padding: 10px 0px 10px 5px;
    text-align: left;
    vertical-align: top;
}

/*
.viewCart tr th{
position: absolute;
top: -9999px;
left: -9999px;
}
*/

.viewCart tr:not(:last-of-type) {
border: 1px solid #ccc;
}

.viewCart tr:not(:last-of-type) td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 40%;
text-align:left;
min-height:35px;
min-width:100%;
}


.viewCart tr td span{
display:block;
min-width:70px;
}

.viewCart{
display:block;
min-width:250px;
}

.viewCart tr:not(:last-of-type) td:before {
position: absolute;
top: 6px;
left: 6px;
width: 60%;
padding-right: 10px;
white-space: nowrap;
}
.viewCart tr:not(:last-of-type) td:nth-of-type(1):before { content: "Product"; }
.viewCart tr:not(:last-of-type) td:nth-of-type(2):before { content: "Description"; }
.viewCart tr:not(:last-of-type) td:nth-last-of-type(3):before { content: "Price"; !important}
.viewCart tr:not(:last-of-type) td:nth-last-of-type(2):before { content: "Quantity" !important; }
.viewCart tr:not(:last-of-type) td:nth-last-of-type(1):before { content: "Total" !important; }
}



@media all and (max-width: 408px){
.billingTable td, .shippingTable td {
/*padding: 8px 10px 0;*/
}
.checkoutLinks {
width:100%;
}
}


@media all and (max-width: 335px){
.orderSummary a.codeButton{
width:70px;
display:block;
margin:10px auto 10px auto;
}
.shippingTable{
float:left;
}
}/* PAYPAL SMARTBUTTONS===============================================================*/.checkoutButtonList { /* Container for the checkout links and PayPal smart payment buttons, if the smart payment buttons are present */ float: right; clear: both; padding-right: 30px;}.checkoutPaypalSmartPaymentButtons { /* Container for the PayPal smart payment buttons */ float: right; clear: both;}.payPalOption td { /* PayPal option in the Payment Information */ width: 220px;}.payPalOption td div { /* Container for the PayPal smart payment buttons in the PayPal option in the Payment Information */ clear: both; float: left;}#payPalButtons { /* PayPal initial order form page when multiple payment option */ background-color: #ffffff; padding: 16px;}#payPalOptionButtons { /* Container for the PayPal smart payment buttons */ float: right; clear: both; width: 220px;}