/* STYLESHEET */

/* Remove rounded corners in Safari Mobile */
input[type=button], input[type=submit] {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

.left {
    float: left;
}

.right {
    float: right;
}

.inline {
    display: inline;
}

.margin-centered {
    margin: 0 auto;
}

.active{
    background-color: #ffd;
}

.inactive-overlay{
    position: absolute;
    top: -10px;      /* inside col-container-20, gives 20px padding */
    left: 0px;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    opacity: .5;
    filter: alpha(opacity=50);
    background: #ffffff;
}

.section{
    position:relative;
}

.center{
    position: absolute;
    top:48%;
    left:30%;
    width:110px;
    height:20px;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.0em;
	font-weight: 300;
	color: #333;
	background-color: #fff;
	}

/* ---------- ERROR ---------- */

.message{
    margin:0;
    padding:5px 20px;
}

.message p{
    font-weight:bold;
    padding:0;
    margin:0;
}

html body input.error[type=text],
html body input.error,
html body select.error,
html body textarea.error,
html body p.error,
#error {background:pink;}

#status {background-color: lightyellow;}

#error li, #status li {
	padding:0;
	margin:0;
    text-decoration: none;
    list-style: none;
}

#error .dismiss-x, #status .dismiss-x {
    float: right;
    font-size:1.2em;
}



/* Place all ajax error messages at top of window so user will definitely see them */
#error.ajax, #status.ajax{
    position: fixed;
    top: 0;
    left: 0;
    margin:0 0 20px 0;
    width: 100%;
    z-index: 500;
}

/* Add a margin to dismiss button so scroll bar doesn't hide it */
#error.ajax .dismiss-x, #status.ajax .dismiss-x {
    margin-right:20px;
}

html body #content p.error{
    padding: 5px 2.5%;
}

/* ---------- TEXT ELEMENTS ----------- */

h1	{
	margin: 0 0 20px 0;
	font-size: 2.0em;
	font-weight: normal;
	line-height: 1.25;
	color: #777;
	}

h2	{
	margin: 0 0 20px 0;
	font-size: 1.5em;
	line-height: 1.25;
	color: #555;
	}

h3 	{
	margin: 0 0 20px 0;
	font-size: 1.25em;
	line-height: 1.25;
	color: #555;
	}

h4 	{
    margin: 0 0 20px 0;
    font-size: 1em;
    line-height: 1.25;
    color: #555;
}

.headline-border {border-bottom: 3px dotted #ccc;}

p, li {
	margin: 0 0 20px 0;
	font-size: 1.0em;
	line-height: 1.5;
	color: #333;
	}

p.small {font-size: 0.75em;}

p.big {font-size: 1.5em; font-weight: bold;}

#content ul {margin-left: 30px;}

hr {
	margin: 10px 0 20px 0;
	width: 100%;
	height: 1px;
	background-color: #ccc;
	border: 0;
	}

a {
	color: #0096d6;
	text-decoration: none;
	transition: all 0.2s ease-in-out 0s;
	}

a:active {color: #0069aa;}

strong {font-weight: bold;}

.hidden {display:none;}

.text-right {text-align: right;}
.text-center {text-align: center;}

img, a img	{border: none;}

/* ---------- COLORS ---------- */

.lt-blue {background-color: #0096d6;}
.dk-blue {background-color: #0069aa;}
.lt-green {background-color: #8bc53f;}
.green {background-color: #0d8842;}
.dk-green {background-color: #004226;}
.orange {background-color: #ff7700;}
.red {background-color: #cc3300;}

.text-lt-blue {color: #0096d6;}
.text-dk-blue {color: #0069aa;}
.text-lt-green {color: #8bc53f;}
.text-green {color: #0d8842;}
.text-dk-green {color: #004226;}
.text-orange {color: #ff7700;}
.text-red {color: #cc3300;}


/* ---------- BUTTON ACTIONS ----------- */
.action-go, a.action-go, input[type=button].action-go, input[type=submit].action-go {background-color: #0d8842;}
.action, a.action, input[type=button].action, input[type=submit].action {background-color: #0096d6;}
.action-stop, a.action-stop, input[type=button].action-stop, input[type=submit].action-stop {background-color: #cc3300;}

.text-action-go, input[type=button].text-action-go, input[type=submit].text-action-go {color: #0d8842;}
.text-action, input[type=button].text-action, input[type=submit].text-action {color: #0096d6;}
.text-action-stop, input[type=button].text-action-stop, input[type=submit].text-action-stop {color: #cc3300;}


/* ---------- COLUMN ELEMENTS --------- */

.col-container-10 {padding: 10px;}
.col-container-20 {padding: 20px;}

.middle-col {background-color: #f7f7f7;}
.middle-col input[type=text], .middle-col select {background-color: #fff;}

/* ---------- TAB ELEMENTS ---------- */

.tabs li {
	display: inline;
	list-style: none;
	}

.tabs li a {
	display: block;
	float: left;
	margin: 0 10px 0 0;
	padding: 10px 20px;
	width: auto;
	border-radius: 5px 5px 0 0;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

.tabs li a {
	color: #fff;
	background-color: #aaa;
	}
.tabs li a.current {
	color: #000;
	background-color: #fff;
	}

.panes {
	margin-top: -1px;
	border-top: 1px solid #ccc;
	}

/* ---------- FORM ELEMENTS ---------- */

form div {margin-bottom: 10px;}

label {
	display: block;
	margin-bottom: 0;
	color: #777;
	}

.label {color: #777;}

input[type=text], input[type=password], input[type=button], input[type=submit], select, a.button, textarea {
	padding: 5px 2.25%;  /* with padding, the width is slightly less than 100% to allow for a thin border */
	width: 95%;
	font-family: Helvetica, sans-serif;
	font-size: 1.0em;
	font-weight: 300;
	color: #000;
	background-color: #f7f7f7;
	border: 1px solid #ccc;
	}

a.button {padding: 5px 10px;}

select {width: 100%;}

select.two-col {width: 45%;}

input[type=checkbox] {
	margin: -4px 3px 0 0;
	padding: 0;
	vertical-align: middle;
	}

input[type=button], input[type=submit], a.button {
	margin: 0 10px 7px 0;
	width: auto;
	text-align: center;
	color: #fff;
	background-color: #999;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	transition: opacity 0.2s ease-in-out 0s;
	}



input[type=button].default {
	color: #666;
	background-color: #ccc;
	cursor: auto;
	}

input.lt-blue, a.lt-blue {background-color: #0096d6;}
input.dk-blue, a.dk-blue {background-color: #0069aa;}
input.lt-green, a.lt-green {background-color: #8bc53f;}
input.green, a.green {background-color: #0d8842;}
input.dk-green, a.dk-green {background-color: #004226;}
input.orange, a.orange {background-color: #ff7700;}
input.red, a.red {background-color: #cc3300;}

input[type=button].text-button {
	margin: 0 0 7px 0;
	padding: 0;
	width: auto;
	text-align: left;
	color: #999;
	background: transparent;
	border: 0;
	border-radius: none;
	}

/* ---------- TABLE ELEMENTS ---------- */

.table-row {
	margin: 0;
	padding: 10px 0;
	}

.table-row:nth-child(even),
div.even{background-color: #f7f7f7;}

.table-row input[type=text] {background-color: #fff;}

.table-row h3 {
	margin-bottom: 10px;
	font-size: 1.0em;
	border-bottom: 1px solid #ccc;
	}

.table-row h3 {display: none;}
.table-top h3 {display: block !important;}

.table-row p {margin: 0 0 5px 0;}

.table-summary {padding: 10px 0;}

/* ---------- BREADCRUMB ---------- */

.breadcrumb {
	margin-bottom: 10px;
	padding: 10px;
	font-size: 0.875em;
	line-height: 1.5;
	color: #555;
	background-color: #eee;
	}


/* ---------- HEADER ---------- */

#header {
    position:relative;
    background: #efefef;
    margin-bottom: 1px;
    height: 140px;
}

#header .search_form{
    position: absolute;
    top: 70px;
    right: 10px;
    width: 250px;
    height: 40px;
}

#header .search_input{
    width:180px;
    margin: 4px 0px;
    display:inline-block;
    float: right;
}

#header .search_button{
    width:40px;
    height:40px;
    padding: 0;
    margin: 0;
    float: right;
    display:inline-block;
}

#header-nav{
    position:absolute;
    top: 110px;
    right: 10px;
}

#header-nav ul li{
    display:inline-block;
    list-style:none;
    margin: 0 1px 0 0;
    padding: 0px;
}

#header-nav ul li a{
    text-decoration:none;
    padding:0 5px;
    font-size: .9em;
}

#header-nav .header-dots{
    background: none;
}

/* ---------- NAV ---------- */
#nav{
    width:100%;
    background: rgba(255,255,255,.7);
    font-size: 1.0em;
    line-height: 1.25em;
    margin: 0 0 10px 0;
}

#nav div{
    background: #0197d6;
}

#nav ul li {
    float:left;
    position: relative;
    margin: 0;
    padding: 5px 10px;
    color: #ffffff;
    list-style-type: none;
}

#nav ul li a{
    color:#ffffff;
}

#nav ul li ul{
    display:none;
    background: #eeeeee;
    position: absolute;
    top: 100%;
    left: 0;
    width: 140px;
    max-height: 300px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 25;
}

#nav ul li ul li{
    float: none;
    display: block;
    border-bottom: 1px solid #cdcbcc;
    background: none;
    margin: 0;
    padding: 5px 10px;
}



#nav ul li ul li a{
    display: block;
    color: #0197d6;
}

.menu_button, .search_close, .search_open_button, .search_closed_button, .nav_background, h1.merchant-name {
    display:none;
}



/* ---------- CONTENT ---------- */

#content {
	margin-bottom: 20px;
	padding: 20px 0;
	}


/* ---------- Category Detail ----------*/

.category-details {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #CCCCCC;
}


/* ---------- Product List ---------- */

.product-list-item {
    margin: 10px 0;
}

.product-list-item.no-button {
    padding-bottom: 25px;
}

.product-list-item p {
    margin-bottom: 5px;
    line-height: 1.25;
}

.product-list-item .price {font-weight: bold;}

.product-list-item .short-description {
    margin-bottom: 7px;
    font-size: 0.75em;
}

.product-list-image {
    margin: 0 0 5px 0;
    font-size: 0.75em;
}

.product-list-item input[type="button"], .product-list-item input[type="submit"] {
    margin: 0 3px 5px 0;
    max-width: 95%;
    font-size: 0.75em;
}

.product-list-item img {
    max-width: 100%;
    max-height: 170px;
}

.list-container .product-name {
    overflow: hidden;
    text-overflow: "";
    height: 2.5em;
}

/* ----- Product Detail ----- */

.product-image {
	margin-bottom: 10px;
	/* FOR DISPLAY */
	height: 360px;
	font-size: 0.75em;
	background-color: #ddd;
	}

.product-thumb {
	float: left;
	margin: 0 5px 10px 5px;
	/* FOR DISPLAY */
	width: 81px;
	height: 81px;
	font-size: 0.75em;
	background-color: #ddd;
	}

.product-detail-thumb {
    cursor: pointer;
}

.detail-container {
	margin-bottom: 10px;
	padding: 20px 20px 10px 20px;
	background-color: #eee;
	}

.detail-container h3 {
	margin-bottom: 2px;
	/* FOR DISPLAY */
	color: #777;
	}

.detail-container p {
	margin-bottom: 5px;
	/* FOR DISPLAY */
	color: #777;
	}

.detail-container .price {
	font-size: 2.0em;
	font-weight: bold;
}

.detail-container .retail-price span {text-decoration: line-through;}


/* ----- START Quantity Pricing ----- */

#qty-price {
	width:100%;
}

#qty-price .sell-price {
	font-size:.5em;
}

#qty-price .sell-price:before {
	content: "Price Range: ";
}

#qty-price #qty-price-table-header {
	text-align:center;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	width:100%;
	display:block;
	margin:0 auto 10px auto;
	padding:0;
	line-height:40px;
}

#qty-price-table {
	background: #D5D5D5;
	color: #333333;
	display:inline-block;
	width:100%;
	padding:0px 0px 20px 0px;
}

#qty-price-table .qty-price-qty, #qty-price-table .qty-price-price-each {width:90%; display:block; margin:0px 0px 0px 10px; padding:0; clear:both;}

#qty-price-table .qty-price-qty:before {
	content: "Quantity: ";
}

#qty-price-table .qty-price-price-each:before {
	content: "My Price: ";
}

#qty-price-table .qty-price-price-each:after {
	content: " ea.";
}

#qty-price-table .qty-price-button {width:98%; display:block; margin:10px auto 10px auto; padding:0; line-height:30px;}

#qty-price-table div {
	font-size: 0.5em;
	/*border: 1px #333333 solid;*/
	padding: 3px;
}

#qty-price-table div.qty-price-radio {
	display:none;
}

/* ----- END Quantity Pricing ----- */

.detail-container label {margin-bottom: 5px;}

.flex label {display: inline; }

.flex label::after {content: ":"; }

.detail-container input[type="text"], .detail-container select {background-color: #fff;}

.detail-container .add-to-basket label, .detail-container .add-to-basket input[type="submit"] {display: inline-block;}

.detail-container .add-to-basket input[type="text"] {
	display: inline-block;
	margin-right: 5px;
	padding: 3px;
	width: 25px;
	text-align: center;
	}

.detail-container select {padding: 5px 1%;}

.detail-container .basket-button {padding: 10px 2.5%;}

.detail-container .share-title {
	display: block;
	float: left;
	margin-right: 6px;
	line-height: 32px;
	font-weight: bold;
	}

.review-summary {
	margin-bottom: 10px;
	font-size: 0.875em;
	line-height: 20px;
	}

.review-summary img {vertical-align: middle;}

.detail-pane {padding: 20px;}

.related-thumb {
	margin: 0 0 5px 0;
	/* FOR DISPLAY */
	width: 170px;
	height: 170px;
	font-size: 0.75em;
	background-color: #ddd;
	}

.review {padding: 20px;}

.review:nth-child(even) {background-color: #eee;}

.review p {margin-bottom: 5px;}

/* ----- My Account ----- */

.my-account p, .invoice p {margin-bottom: 10px;}

.order-row {padding: 10px 0 0 0;}

.order-row h3 {
    margin-bottom: 10px;
    font-size: 1.0em;
    border-bottom: 1px solid #ccc;
}

.card-icon {
    margin-bottom: 5px;
    vertical-align: middle;
}

.invoice .order-row h3 {display: none;}
.invoice .order-top h3 {display: block !important;}

/* styling for product image next to product name */
.wishlist-items img{
    float:left;
    margin-right: 10px;
    max-width: 90px;
    max-height: 90px;
}
/* ----- Basket ----- */

.basket .order-row p {margin-bottom: 10px;}

.basket .option{
    font-size: .9em;
    line-height: 1.2em;
    display: inline-block;
}

input.basket-qty {
	padding: 5px;
	width: 25%;
	text-align: center;
	}

input[type=button].text-red {color: #cc3300;}

/* ---------- CHECKOUT ----------*/

p.login-or{
    font-size:1.5em;
    padding-top: 100px;
    font-weight: bold;
    color:#555;
    text-align: center;
}

/* ---------- WISHLIST ----------*/

#wishlist .item input[type=text]{
    width: 10%;
}

#wishlist .item select{
    width: auto;
}

#wishlist .item p{
    line-height: 1.8em;
}

/* ---------- FOOTER ---------- */

#footer {margin-bottom: 20px;}


/* ---------- EVENT MODULE --------------*/

.home-events {
    padding: 20px;
    width: 960px;
    background: #fff url(../../../images/home-events-bg.png) no-repeat;
}

/* ----- Event Thumbnails ----- */

.scroll-pane {
    float: left;
    width: 20%;
    max-height: 320px;
    height:auto;
    overflow: auto;
}

/* ----- Featured Event ----- */

#featured-event-wrapper {
    position: relative;
    float: right;
    margin-top: -1px;
    width: 75%;
    height: auto;
    max-height: 320px;
	text-align: center;
}

#featured-event {
	text-align: center;
}

.event-info {
    display: none;
    width: 75%;
    height: auto;
    max-height: 320px;
}

.event-info:first-child {display: block;}

/* ----- Tabs ----- */

.calendar-list {
    float: right;
    width: 100%;
    height: auto;
    max-height: 320px;
}

#tabs {width: 100%}

#tabs ul.tabNavigation {
    height: 40px;
    list-style: none;
    margin-left: 0;
}

#tabs ul.tabNavigation li {
    display: inline;
    text-align: center;
    padding: 0;
    margin: 0;
}

#tabs ul.tabNavigation li a {
    float: left;
    display: block;
    width: 48%;
    padding:0 1%;
    height: 40px;
    font-size: 1.5em;
}

#tabs ul.tabNavigation li.calendar-view a {background: #fff; }
#tabs ul.tabNavigation li.list-view a {background: #fff }
#tabs ul.tabNavigation li.calendar-view a.selected {background: #0197D6; color: #fff; }
#tabs ul.tabNavigation li.list-view a.selected {background:#0197D6; color: #fff; }
#tabs ul.tabNavigation li a:focus {outline: 0;}

#tabs > div {
    display: none;
    width: 100%;
    height: auto;
    max-height: 300px;
    z-index: 0;
}

#tabs > #calendar-view {display: block; height: 280px; position: relative;}
#tabs > #list-view {position: relative; height: 280px; overflow: hidden;}

/* ----- Calender View ----- */

.calendar_event_list {background-color: #333; border: none;}

.calendar_event_list td.calendar-heading {
    border: none;
}

.calendar_event_list td {
    width: 30px;
    height: 33px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #333;
    cursor: default;
}

.event_container {
	position: relative;
	line-height: 33px;
}

.calendar_event_list td.events {
    color: #fff;
    background-color: #0197D6;
}

table .calendar-heading {
    width: 100% !important;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    background-color: #0197D6;
    border: none;
}

span.left_arrow, span.right_arrow {
    position: absolute;
    font-size: 1.5em;
    color: #fff;
    cursor: pointer;
    z-index: 100;
}

span.left_arrow {top: 14px; left: 20px;}
span.right_arrow {top: 14px; right: 20px;}

td.day_of_week {
    color: #fff;
    background-color: #333;
}

td.td_today {color: #0197D6;}

.event_popup {
    position: absolute;
    top: -20px;
    left: -33px;
    width: 90px;
    line-height: 0.8125em;
    background: none;
    border: 1px solid #ececec;
    z-index: 200;
}

.event_popup table{
    width: 100%;
    border: 1px solid #0197D6;
}

.event_popup table td{
    border:none;
    padding: 0 2%;
}

.event_popup table td, .event_popup table td a {
    font-size: 0.875em;
    font-weight: normal;
    text-align: left;
    color: #333;
}

.event_popup table td a:hover{
    color:#0197D6;
}

span.event_start_time {margin-bottom: 3px; padding-bottom: 2px; border-bottom: 1px solid #ccc;}
span.event_product_name {margin-bottom: 6px;}

.event_popup a {color: #fff;}
.event_popup a:hover {color: #eee;}

/* ----- List View ----- */

.all-events-button {
    display: block;
    position: absolute;
    left: 10px;
    bottom: 0px;
    width: 250px;
    padding: 5px;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    text-align: center;
    background-color: #005daa;
}

.all-events-button:hover {
    color: #fff;
    background-color: #ed3523;
}

.short_event_list {
    background-color: #fff;
    border-top: 1px solid #ccc;
}

.short_event_list td {
    padding: 5px;
    font-size: 0.875em;
    color: #333;
    border-bottom: 1px solid #ccc;
}

.short_event_list td.event_date {width: 20%;}

.short_event_list a {color: #0197d6;}
.short_event_list a:hover {color: #0197d6;}









/* ---------- FULL VIEWPORT SPINNER ---------- */
.spinner-overlay{
    display:none;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: #fff;
    opacity: .7;
    z-index: 100;
}

.spinner-overlay div.outer{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    width: 220px;
    height: 220px;
    border-radius: 10px;
    padding: 10px;
}

.spinner-overlay div.inner{
    position: relative;
    top: -50%;
    left: -50%;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    padding: 10px;
}

.spinner-overlay div p{
    text-align: center;
    padding:0;
    margin:0;
    font-weight:bold;
    color:#575757;
}

#shipping_methods p{
    font-size: 1.0em;
    margin: 0 0 0 5px;
}


/********** Internet Explorer 8 fixes ************/

.IE8-review-container {
    width: 50%;
    background-color: #EEEEEE;
    display: none;
    padding: 2em 4em;
}

#nav ul li.open{
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: top right;
    color: #0197d6;
}

#nav ul li.open > a{
    color: #0197d6;
}

#nav {
    opacity:1;
}

/* ----------  Hover Effects ----------
Hover only works for computers with a pointing device (mouse, trackpad...)
Classes touch and no-touch classes are added to html tag on page load
Classes horizontal and menu are added to the #nav tag on page load and page resize
*/

.dismissable:hover{cursor: pointer;}  /* error and status messages, deletes dismissable html */
a:hover {color: #0069aa;}
input[type=button].default:hover {opacity: 1.0;}
input[type=button]:hover, input[type=submit]:hover, a.button:hover {opacity: 0.8;}


.no-touch #nav.horizontal ul li:hover ul,
#nav ul li.open ul{
    display: block;
}

#nav ul li ul li:hover a{
    color: #ffffff;
}

#nav ul li ul li:hover{
    background: #0197d6;
}

#nav li .triangle-up,
#nav li .triangle-down{
    display:none;
}

#nav.horizontal li.open .triangle-up{
    display:block;
    float:right;
}


/* ---------- MEDIA QUERIES ---------- */


@media only screen and (max-width: 1159px) {

}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container12 .list-container .column2 {
        width:236px;
    }

	#tabs ul.tabNavigation{
		height: 36px;
	}

	#tabs ul.tabNavigation li a {
		height: 36px;
		font-size: 1.25em;
	}

	span.left_arrow {top: 4px; left: 20px;}
	span.right_arrow {top: 4px; right: 20px;}

	.calendar_event_list td {
		height: 26px;
	}

	table .calendar-heading {
		width: 100% !important;
		line-height: 32px;
	}

	.event_container {
		position: relative;
		line-height: 26px;
	}

	.scroll-pane {
		max-height: 260px;
	}

	.calendar-list {
		height: 260px;
	}
}

@media only screen and (min-width: 768px) {

    .small-screen{
        display:none;
    }

    #nav ul li.open{
        width: 140px;
        background-color: #ffffff;
        background-repeat: no-repeat;
        background-position: top right;
        color: #0197d6;
    }

    #nav ul li.open > a{
        color: #0197d6;
    }

    #nav{
        opacity:1;
    }

}


@media only screen and (max-width: 767px) {

    .large-screen{
        display:none;
    }

	h1 {margin: 0;}

    html body {
        font-size:90%;
    }

    html body p{
        line-height:1.3em;
        margin-bottom: 10px;
    }

    html body .message p{
        margin:0;
        padding:5px;
    }

    html body .message p.dismiss-x{
        padding:0;
    }

    #content {
        margin-bottom: 10px;
        padding: 10px 0;
    }

    .col-container-20{
        padding: 5px 20px;
    }

    .col-container-10{
        padding: 5px 10px;
    }

    /* general buttons, bigger for touch */
    input[type=button], input[type=submit], a.button {
        padding: 8px 3%;
        border-radius: 8px;
    }

	#header div#returning-customer{
		display: none;
	}


    /* my account */
	#my-account-orders div:first-child .column6 {margin: 0;}
	#my-account-orders div:first-child .col-container-20 {padding: 20px 0 0 0;}
	#my-account-orders div:first-child h2 {margin: 0;}

	.table-row h3 {display: block;}
	.row .table-row div {margin-bottom: 10px;}

    .order-row div p {margin-bottom: 0; }
    .order-row div h3 {margin-bottom: 0; }

    .text-right {text-align: left;}

    .detail-container {padding: 10px;}

    /* ---------- CHECKOUT ----------*/
    p.login-or{
        font-size:1.5em;
        padding: 0px;
        margin: 0px;
    }

    h1, h2, h3, h4	{
        margin: 0 0 10px 0;
    }

    h1 {
        font-size: 1.7em;
    }

    h2 {
        font-size: 1.3em;
    }

    h3 {
        font-size: 1.1em;
    }

    p, li {
        margin: 0 0 10px 0;
    }

    /* ---------- NAV ----------*/
    #header .menu_button{
        display:block;
        position:absolute;
        top:0;
        left:0;
        z-index: 150; /* higher than the nav_background */
        background-color: transparent;
    }

    #header .open{
        background-color: #0096d6;
    }

    #nav .row .column12{
        margin:0;
        width:100%;
    }

    #nav{
        position:absolute;
        opacity: 0;
        top: 40px;
        right: 100%;
        width: 80%;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 250; /* higher than the nav_background */
    }

    #nav ul li, #header-nav ul li{
        font-size: 1.25em;
        line-height: 1.5em;
        border-bottom: 1px solid #aaaaaa;
    }

    html #nav.menu li .triangle-down,
    html #nav.menu li.open .triangle-up{
        display:block;
        float:right;
    }

    html #nav.menu li.open .triangle-down{
        display:none;
    }

    #nav ul li a{
        color: #0096d6;
    }

    #nav ul{
        display:block;
        padding: 0;
        margin: 0;
    }

    #nav ul.qm0{
        background: #ffffff;
    }

    #nav ul li{
        display:block;
        width: 96%;
        padding: 8px 2%;
        background-color: #fff;
    }

    #nav ul li ul{
        display:none;
        position: relative;
        width: 100%;
        max-height: none;
        background: transparent;

    }

    #nav ul li.open ul{
        display: block;
    }

    #nav ul li ul li:last-of-type{
        border-bottom: none;
    }

    .nav_background{
        position: absolute;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        z-index: 100;
        background: #000;
        display: none;
        opacity: .6;
    }


    /* ---------- Header ---------- */
    #header{
        height: 40px;
        margin-bottom: 10px;
    }

    #header div{
        padding: 0;
        margin: 0;
    }

    #header p{
        padding: 5px 10px;
    }

    #header h1.merchant-name{
        display: block;
        margin-left: 40px;
        font-size: 0.9375em;
        line-height: 40px;
        color: #000;
    }

    #header-nav{
        top: 0;
        right: 0;
    }

    #header-nav .header-nav-container{
        display: block;
        padding: 0;
        margin: 0;
        background-image: url("../../../mc_img/rsp/dots.png");
    }

    #header-nav .header-nav-menu{
        z-index: 20;
    }

    #header-nav .header-dots{
        display: block;
        height: 40px;
        width: 40px;
        padding:0;
        margin:0;
    }

    #header-nav ul{
        display: none;
        position: absolute;
        top: 40px;
        right: 0;
        padding: 0;
        margin: 0;
        width: 140px;
        background: #ffffff;
    }

    #header-nav ul li{
        display: block;
        border-bottom: 1px solid #cdcbcc;
        background: none;
        margin: 0;
        padding: 5px 10px;
    }

    #header-nav.open .header-nav-container{
        background-color: #0096d6;
    }

    #header #nav_search_form.open{
        display:block;
    }

    #header #nav_search_form{
        position: absolute;
        top: 0px;
        right: 0px;
        background: #0096d6;
        display:none;
        z-index:180;
        width: 420px;
    }

    #header .search_input{
        margin: 4px 0px;
        display:inline-block;
        height: 20px;
        width: 310px;
    }

    #header .search_close{
        display:inline-block;
        font-size: 24px;
        margin:0;
        padding:5px 5px 11px 11px;
        cursor: pointer;
        height: 24px;
        width: 24px;
        float: right;
    }

    #header .search_open_button{
        position:absolute;
        top:0;
        right:40px;
        width:40px;
        height:40px;
        padding: 0;
        margin: 0;
        display:inline-block;
        z-index: 50;
    }

	/*---- EVENTS -----*/
	.scroll-pane {
		max-height: 260px;
	}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container12 .list-container .column2 {
        width:200px;
        margin-right: 5px;
        margin-left: 5px;
    }

    .reveal-modal {
        left: 50%;
        margin-left: -50%;
        width: 86%;
        padding: 5%;
    }

	.container12 .calendar-list {
		width: 80%;
		padding: 0 10%;
	}
}

@media only screen and (max-width: 479px) {
	#content .tabs {margin-left: 10px;}
	.tabs li a {margin: 0 5px 0 0; padding: 5px 10px;}

    #header #nav_search_form{
        width: 300px;
    }

    #header .search_input{
        width: 200px;
    }

    .container12 .list-container .column2 {
        width:140px;
        margin-right: 5px;
        margin-left: 5px;
    }

    .reveal-modal {
        left: 50%;
        margin-left: -50%;
        width: 86%;
        padding: 5%;
    }


	/*---- EVENTS -----*/
	.scroll-pane {
		max-height: 160px;
	}

	.container12 .calendar-list {
		width: 80%;
		padding: 0 10%;
	}
}

@media print {
	@page {margin: 0.5in;}
	.invoice {margin: 0; padding: 0; width: 100%; font-size: 90%;}
	.invoice #layout {margin: 0; padding: 0;}
	.invoice #header, .invoice #nav, .invoice #footer {display: none;}
	.invoice .prefix8 {float: right !important;}
	.invoice .column4 img {width: 40px !important; height: 25px !important;}
	.invoice h2 {font-size: 1.0em;}
	.invoice a.button {display: none;}
	.invoice .row:first-child a {display: none;}
}