/*----------------------------------------------------------------------
	EudoGames Store
	http://store.eudogames.com/

	normal weight: 300
	bold weight:   700

	bg darkest:    #222222
	bg dark:       #0D6180
	bg light:      #DDDDDD
	bg lighest:    #EEEEEE

	text:           #222222
	heading:        #0D6180

	link:           rgb(34, 68, 68)
	link border:    rgb(104, 208, 208)
	link hover:     rgb(69, 138, 138)

	visited:        rgb(102, 51, 51)
	visited border: rgb(242, 121, 121)
	visited hover:  rgb(172, 86, 86)

	border-bottom:  5px
	border-radius:  3px
----------------------------------------------------------------------*/

.no-js [data-toggle] { display: none !important }
.no-js [data-togglable] { display: block !important }

button.close {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0.25em;

	font-size: 1.25em;
	line-height: 1;
}

#error, #notice {
	border: 2px solid rgba(0,0,0,0.25);
	border-radius: 3px;
	margin-bottom: -0.5em;
	padding: 0.5em 2em 0.5em 1em;
	position: relative;
}
#error .close, #notice .close {
	position: absolute;
	right: 0.2em;
	top: 0.2em;
}
#error { background: #FFE0E0 }
#notice { background: #E0F3FF }

p.domestic,
p.preorder {
	margin: 0;
}
p.domestic:before,
p.preorder:before {
	color: #784B4B;
	font-size: 0.75rem;
}
p.domestic {
	font-size: 0.75rem;
	font-style: italic;
}
p.preorder {
	color: #444;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
}
p.preorder date {
	font-size: 0.75rem;
	font-weight: 300;
	text-transform: none;
}

/*----------------------------------------------------------------------
	Autocomplete
----------------------------------------------------------------------*/

.ui-autocomplete {
	background: #0D6180;
	border-bottom: 5px solid #222222;
	box-shadow: rgba(0, 0, 0, 0.5) 0 5px 5px 0;
	color: #DDDDDD;
	margin: -10px 0 0 5px !important;
	padding: 1.1rem !important;
}

.ui-autocomplete a {
	color: #DDDDDD;
}
.ui-autocomplete a:hover,
.ui-autocomplete a:focus,
.ui-autocomplete a:active {
	color: rgb(255, 233, 128);
}

/*----------------------------------------------------------------------
	Forms
----------------------------------------------------------------------*/

input[type="email"],
input[type="password"],
input[type="tel"],
input[type="text"],
select,
textarea {
	padding: 5px;
	width: 100%;
}

.form-fields {
	list-style-type: none;
	margin-top: 0.5em;
	padding-left: 0;
}
@media (min-width: 1200px) {
	.form-fields {
		padding-right: 20%;
	}
}
.form-fields label {
	display: block;
	margin-top: 0.5em;
}
.form-fields small {
	display: block;
}
.form-fields label small {
	display: inline;
}

form.big .box {
	margin-top: 0;
}
form.big li {
	text-align: left;
}
form.big li.button,
form.big li.captcha,
form.big li.checkbox {
	padding-top: 0.5em;
}
form.big label {
	display: block;
}
form.big input[type="email"],
form.big input[type="password"],
form.big input[type="tel"],
form.big input[type="text"] {
	padding: 5px;
	width: 100%;
}
form.big input[type="checkbox"] + label,
form.big input[type="radio"] + label {
	display: inline;
}
form.big input[type="submit"] {
	display: block;
	margin: 0 auto;
	width: 50%;
}
form.big small {
	display: block;
	font-size: 0.8rem;
}
form.big .hint {
	font-style: italic;
	text-align: right;
}

form.big .inline {
	font-size: 1rem;
	margin-top: 0;
	text-align: center;
}
form.big .inline li + li {
	margin-left: 2em;
}

/*----------------------------------------------------------------------
	User/cart blocks common
----------------------------------------------------------------------*/

#menu-cart,
#menu-user {
	position: relative;
}

#menu-cart p,
#menu-user p,
#menu-cart ul,
#menu-user ul {
	margin: 0;
}
#menu-cart .more,
#menu-user .more {
	right: 0;
}

/*----------------------------------
	User block in header
----------------------------------*/

#menu-wrap {
	position: relative;
	text-shadow: 1px 1px 0 #000;
}
#menu-user {
	color: #FFF;
	padding: 1em 0.5em;
	position: absolute; right: 0; top: -4.5em;
	text-align: right;
	text-shadow: 1px 1px 0 #222;
}
@media (max-width: 767px) {
	#menu-user {
		margin-top: 1em;
		position: static;
		text-align: left;
	}
}
#menu-user > p, #menu-user > ul {
	margin: 0;
}
#menu-user .more {
	background: #1F7899;
	border-left: 5px solid #1F7899;
	border-right: 5px solid #1F7899;
	border-top: 0.35em solid #1F7899;
	border-bottom: 5px solid #222;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	box-shadow: none !important;
	padding: 0.5em 0.5em 0.5em 0 !important;
	right: 0;
	text-align: left;
	text-shadow: 1px 1px #000;
	width: 13em !important;
}
#menu-user .more a:hover {
	background: none !important;
}

/*----------------------------------------------------------------------
	Cart block in header
----------------------------------------------------------------------*/

#menu-cart {
	left: auto;
	right: -0.5em;
	text-align: right;
}
@media (max-width: 767px) {
	#menu-cart {
		right: auto;
	}
}
#menu-cart > a {
	display: inline-block;
	font-size: 1.25em;
	line-height: 1;
	padding: 0.5em 1em;
}
#menu-cart a:hover {
	background: #000;
}
#menu-cart .more {
	padding: 1em !important;
	text-align: left;
	width: 15em;
}
#menu-cart .more table {
	border-collapse: separate;
	margin-top: 0;
	max-width: 100%;
}
#menu-cart .more th,
#menu-cart .more td {
	line-height: 1;
	overflow: hidden;
	padding: 0.25rem 0.5rem;
	vertical-align: bottom;
}
#menu-cart .more tbody {
	font-size: 0.75rem;
}
#menu-cart .more tbody tr + tr th,
#menu-cart .more tbody tr + tr td {
	border-top: 1px dotted #222222;
}
#menu-cart .more tbody tr:hover th,
#menu-cart .more tbody tr:hover td {
	background: #222222;
}
#menu-cart .more td:last-child {
	text-align: right;
}
#menu-cart .more th[scope="row"] {
	font-weight: 300;
}
#menu-cart .more th[scope="row"] a:first-child {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#menu-cart .more .subtotal th,
#menu-cart .more .subtotal td {
	border-top: 2px solid #000;
	font-weight: 700;
}
#menu-cart .more .button {
	text-align: center;
	width: 100%;
}

/*----------------------------------------------------------------------
	Buylist
----------------------------------------------------------------------*/

#exit-buylist {
	border: 0 !important;
	border-radius: 3px;
	display: block;
	float: right;
	line-height: 1;
	margin: -2.75rem 0 0 0; /* lines up with baseline of page title */
	padding: 0.5em 1em;
}
#exit-buylist:hover {
	background: #DDDDDD;
}

/*----------------------------------------------------------------------
	Buylist > Browse Sets
----------------------------------------------------------------------*/

#buylist-browse h2,
#buylist-search h2 {
	margin: 0 0 0.5rem;
}

#buylist-search input {
	display: inline;
	width: auto;
}
#buylist-search input[type="search"] {
	max-width: 74%;
}
#buylist-search input[type="submit"] {
	top: -2px;
}

#buylist-browse {
	padding-bottom: 0.75rem;
}
#buylist-browse ul {
	margin: -0.1rem 0 -0.5rem 1rem;
	padding-left: 0;
	text-align: left;
}
#buylist-browse a {
	border-bottom: 0 !important;
}
#buylist-browse li.lead {
	display: block;
	float: right;
	font-size: 2.25rem; /* doesn't match anything, just looks good */
	width: 50%;
}

/*----------------------------------------------------------------------
	Buylist - Most Wanted
----------------------------------------------------------------------*/

#wanted-standard h2,
#wanted-modern h2 {
	text-align: center;
}

.tiled {
	display: block;
	width: 100%;
}
.tiled li {
	border-bottom: 5px inset transparent;
/*	float: left; */
	line-height: 1;
	font-size: 1.25em;
	overflow: hidden;
	padding: 0.5rem 0 0.5rem 60px; /* can't use rems on the left because the image is sized in px */
	position: relative;
	text-align: right;
/*	width: 100%; */
}
.tiled li:hover {
	background: #DDDDDD;
	overflow: visible;
}
.tiled li a {
	border-bottom: 0 !important;
	float: left;
	font-size: 1.12rem;
	font-weight: 400 !important;
	line-height: 1.12;
	max-width: 75%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tiled li a:hover,
.tiled li a:focus,
.tiled li a:active {
	background: transparent;
	text-shadow: none;
}
.tiled li br {
	display: none;
}
.tiled li .thumb {
	border-radius: 3px;
	height: auto;
	position: absolute; left: 0; top: 0;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	width: 50px;
}
.tiled li:hover .thumb {
	box-shadow: 0 0 0 5px #DDDDDD;
	left: -50px; top: -25px;
	width: 100px;
	z-index: 1000;
}

.tiled.x2 li { width: 50% }
.tiled.x3 li { width: 33% }
.tiled.x4 li { width: 25% }

/*----------------------------------------------------------------------
	Store Landing Page
----------------------------------------------------------------------*/

#store-search,
#store-browse {
	margin-bottom: 1.4em;
}

#store-search {
	padding-right: 4.5em;
}
#store-search button,
#store-search input {
	font-size: 1.5em;
}
#store-search input {
	width: 100%;
}
#store-search button {
	float: right;
	margin-right: -3.5rem;
	width: 3rem;
}
#store-search .inline li {
	display: block;
	float: left;
	margin: 0;
	padding: 0 1em 0 0;
	text-align: center;
	width: 50%;
}

#store-search ul {
	margin-top: 0.25em;
	margin-bottom: -0.25em;
}
#store-search li {
	font-size: 0.8em;
}

#store-browse ul .icon:before {
	margin-left: -5px;
	padding-right: 0;
	text-align: center;
	width: 40px;
}

/*----------------------------------------------------------------------
	Set Lists
----------------------------------------------------------------------*/

.setlist .span12,
.setlist .span12 + .span4,
.setlist .span8 + .span4,
.setlist .clear/*,
.setlist .span4:nth-of-type(3n+1)*/ { clear: left }

.setlist .stretch { margin-bottom: 0 }
.setlist:first-of-type .stretch { margin-top: 0 }

.setlist h3 { border-bottom: 1px solid #DDD; font-size: 1.25em }

.setlist ul { list-style-type: none; margin-bottom: 0; padding-left: 0 }
.setlist .stretch + ul { margin-top: 1em } /* toplevel category, eg. duel decks */

.setlist .future { opacity: 0.75 }
.setlist .future small { color: #444; font-size: 0.7em; letter-spacing: 1px; text-transform: uppercase }

/*----------------------------------------------------------------------
	Pagination
----------------------------------------------------------------------*/

.pagination {
	float: right;
	padding: 5px 0;
	padding: 0.25rem 0;
}
.pagination a,
.pagination span {
	padding: 0 5px;
	padding: 0 0.25rem;
}
.pagination :first-child {
	padding-left: 0;
}
.pagination :last-child {
	padding-right: 0;
}
.pagination .current {
	background: #DDDDDD;
	border-radius: 3px;
	color: #444;
	font-weight: 700;
}
.pagination .prev_page.disabled,
.pagination .next_page.disabled {
	display: none;
	visibility: hidden;
}

/*----------------------------------------------------------------------
	Product Stock Table
----------------------------------------------------------------------*/

.product-stock {
	margin: 0;
	width: 100%;
}
.product-stock tr + tr td {
	padding-top: 5px;
}

.product-stock .number,
.product-stock .action {
	text-align: right;
}
.product-stock .number {
	width: 10%;
}
.product-stock .action {
	width: 20%;
}
.preorder .product-stock .number {
	width: 8%;
}
.preorder .product-stock .action {
	width: 22%;
}

.product-stock input[type="number"] {
	font-size: 0.85rem;
	width: 4em;
}
.product-stock input[type="submit"] {
	margin: 0;
	padding-top: 0.35em;
	padding-bottom: 0.35em;
}

.product-stock tr:hover td,
.product-stock tr:hover td b {
	color: #0D6180;
}

.product-stock.empty input[type="submit"] {
	font-style: normal;
}

.product-stock + p { /* link: back to category */
	margin-top: 3em;
}

/*----------------------------------------------------------------------
	Product Page
----------------------------------------------------------------------*/

.product .images {
	list-style-type: none;
	padding-left: 0;
}
.product .images li + li {
	display: inline;
}

.product .horizontal dt {
	color: #444;
	font-weight: 700;
	text-align: left;
	width: 20%;
}
.product .horizontal dt:after {
	content: ":";
}
.product .horizontal dd {
	margin-left: 20%;
}
.product .horizontal dd :first-child {
	margin-top: 0;
}
.product .horizontal dd :last-child {
	margin-bottom: 0;
}
.product .horizontal dt,
.product .horizontal dd {
	border-top: 1px solid #DDDDDD;
	margin-bottom: 4px;
	padding-top: 4px;
}
.product .horizontal dd p a {
	border-bottom: 0 !important;
}

/*----------------------------------------------------------------------
	Product Listings
----------------------------------------------------------------------*/

.products {
	clear: both;
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

.products li {
	border-bottom: 5px solid #DDDDDD;
	margin-top: 0.5rem;
	overflow: hidden;
	padding-left: 142px;
	padding-top: 0.5rem;
	position: relative;
}
.products li:hover {
	background: #DDDDDD;
	border-radius: 0 5px 5px 0;
	margin-right: -10px;
	padding-right: 10px;
	overflow: visible;
}

.products h3 {
	line-height: 1;
	margin: -0.25rem 0 0 0;
}

.products aside {
	display: none;
	visibility: hidden;
}

.products img {
	position: absolute; left: 0; top: 0;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	width: 122px;
}
.products li:hover img {
	border: 5px solid #DDDDDD;
	border-radius: 10px;
	left: -50px;
	margin: -5px;
	width: 182px;
	z-index: 100;
}

/* Category Browse Header */
#category-header, #category-info, #category-filters {
	border-bottom: 1px solid #CCC;
}
#category-header h1 {
	border-bottom: 0;
	float: left;
}
#category-header-toggles, #category-quick-filters {
	float: right;
	margin: 0.5em 0 0 1.5em;
}
#category-header-toggles button, #category-quick-filters h4, #category-quick-filters ul, #category-quick-filters li {
	display: inline;
}
#category-info, #category-filters {
	background: #FFF;
	clear: both;
	margin: 0;
}
#category-info {
	padding-left: 1em;
	padding-right: 1em;
}
#category-info .contents {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	    -webkit-box-orient: horizontal;
	 -webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	    -ms-flex-direction: row-reverse;
	        flex-direction: row-reverse;
	min-height: 5em;
}
#category-logo {
	background-position: center 1em;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 25%;
	    -ms-flex: 0 0 25%;
	        flex: 0 0 25%;
	       max-width: 25%;
}
#category-description {
	padding-right: 1em;
}

/*----------------------------------------------------------------------
	Product Listings > Filters
----------------------------------------------------------------------*/

#category-filters {
	background: #FFF;
	border-radius: 0 0 5px 5px;
	margin: 0 0 1em;
	padding: 1em;
}
#advanced-filters h4 {
	margin: 0;
}
#advanced-filters .form-fields {
	margin-top: 1em;
	padding-right: 0;
}
#advanced-filters .form-fields li {
	float: left;
	padding: 0 1em 0.5em 0;
	width: 33%;
}
#advanced-filters .form-fields li:nth-of-type(3n+1) {
	clear: left;
}
#advanced-filters .form-fields .form-action {
	float: right;
	padding-top: 1.5em;
}
#advanced-filters .form-fields .form-action button {
	display: block;
	font-size: 125%;
	font-weight: normal;
	width: 100%;
}
#advanced-filters .form-fields input,
#advanced-filters .form-fields select {
	display: block;
	width: 100%;
}
#advanced-filters input[name="sort_by_price"] {
	height: 1.4rem;
	margin-top: -1.4rem;
	width: 1.4rem;
}
#advanced-filters label[for="sort_by_price"] {
	margin-top: 1.4rem;
	margin-left: 2.8rem;
}
#advanced-filters input[type="submit"] {
	margin-top: 1.4rem;
}

#quick-filters h4,
#quick-filters ul,
#quick-filters li {
	display: inline;
	margin-left: 0;
	margin-right: 0.5rem;
	padding-left: 0;
}
#quick-filters li {
	list-style-type: none;
}

#abc-filters {
	margin-bottom: 0;
	text-align: center;
}

/*----------------------------------------------------------------------
	Advanced Search Form
	This is a nightmare because Crystal Commerce does not provide any
	way to customize the HTML output for the form, so it is a giant
	mess of horribly organized div soup. :(
----------------------------------------------------------------------*/

#advanced_search_form label {
	color: #444;
	display: block;
	font-weight: 700;
}
#advanced_search_form input,
#advanced_search_form select {
	width: 100%;
}
#advanced_search_form input[type="checkbox"],
#advanced_search_form input[type="radio"] {
	display: inline;
	width: auto;
}
#advanced_search_form input[type="checkbox"] + label,
#advanced_search_form input[type="radio"] + label,
#advanced_search_form label[for="buylist_mode"],
#advanced_search_form label[for="search_in_stock"] {
	font-weight: 300;
}

#advanced_search_form .descriptor_choices th,
#advanced_search_form .descriptor_choices td {
	padding-left: 0;
}

#advanced_search_form #name_includes,
#advanced_search_form #tags_includes,
#advanced_search_form #sort_by,
#advanced_search_form .col1 {
	clear: left;
	float: left;
	padding: 0 1rem 0.5rem 0;
	width: 50%;
}
#advanced_search_form #sort_by {
	padding: 0.5rem 1rem 1rem 0;
	text-align: right;
}
#advanced_search_form #sort_by label,
#advanced_search_form #sort_by select {
	display: inline;
	width: auto;
}
#advanced_search_form #sort_by label {
	float: left;
}
#advanced_search_form #sort_by label:after {
	content: ":";
}
#advanced_search_form #sort_by select {
	width: 40%;
}
#advanced_search_form #categories_select {
	padding-bottom: 0.5rem;
}
#advanced_search_form #categories_select select {
	height: 14rem;
}
#advanced_search_form #filter_buylist_mode,
#advanced_search_form #filter_in_stock input {
	padding-bottom: 0.5rem;
}
#advanced_search_form #filter_buylist_mode input,
#advanced_search_form #filter_buylist_mode label,
#advanced_search_form #filter_in_stock input,
#advanced_search_form #filter_in_stock label {
	display: inline;
	width: auto;
}
#advanced_search_form #filter_buylist_mode label,
#advanced_search_form #filter_in_stock label {
	margin-left: 0.25rem;
}
#advanced_search_form #filter_buylist_mode input,
#advanced_search_form #filter_in_stock input {
	float: left;
	height: 1.4rem;
}
#advanced_search_form #filter_sell_price,
#advanced_search_form #filter_buy_price {
	padding-bottom: 0.5rem;
	text-align: right;
}
#advanced_search_form #filter_sell_price label,
#advanced_search_form #filter_sell_price input,
#advanced_search_form #filter_buy_price label,
#advanced_search_form #filter_buy_price input {
	display: inline;
	width: auto;
}
#advanced_search_form #filter_sell_price label:first-child,
#advanced_search_form #filter_buy_price label:first-child {
	float: left;
}
#advanced_search_form #filter_sell_price input,
#advanced_search_form #filter_buy_price input {
	width: 25%;
}
#advanced_search_form #advsearch_submit {
	font-size: 1.5rem;
	padding-top: 0.5rem;
}

#advanced_search_form .col2 {
	float: left;
	height: 32.4rem; overflow-x: hidden; overflow-y: auto;
	margin-top: -10.4rem;
	padding: 0 1rem 0.5rem 1rem;
	width: 50%;
}
#advanced_search_form .col2 legend,
#advanced_search_form .col2 div[style="clear:left"] {
	display: none;
	visibility: hidden;
}
#advanced_search_form .col2 table,
#advanced_search_form .col2 tbody,
#advanced_search_form .col2 td,
#advanced_search_form .col2 div.choice_option {
	display: inline;
}
#advanced_search_form .col2 th {
	clear: both;
	display: block;
	font-weight: 300;
}
#advanced_search_form .col2 #descriptor_rarity th,
#advanced_search_form .col2 #descriptor_finish th,
#advanced_search_form .col2 #descriptor_color th {
	font-weight: 500;
}
#advanced_search_form .col2 .choice_option input,
#advanced_search_form .col2 .choice_option label {
	float: left;
	width: auto;
}
#advanced_search_form .col2 .choice_option input {
	height: 1.4rem;
}
#advanced_search_form .col2 .choice_option label {
	margin-right: 1rem;
	padding-left: 0.25rem;
}
label[for="search_with_descriptor_values_8_m"] {
	content: "Mythic";
}
label[for="search_with_descriptor_values_8_r"] {
	content: "Rare";
}
label[for="search_with_descriptor_values_8_u"] {
	content: "Uncommon";
}
label[for="search_with_descriptor_values_8_c"] {
	content: "Common";
}
label[for="search_with_descriptor_values_8_p"] {
	content: "Promo";
}
label[for="search_with_descriptor_values_8_s"] {
	content: "Special";
}
#search_with_descriptor_values_8_p,
#descriptor_color .choice_option:nth-of-type(6) input[type="checkbox"] {
	clear: left;
}
#advanced_search_form .col2 tr + tr th {
	clear: both;
	display: block;
	margin-top: 0.5rem;
	padding-top: 0.25rem;
}

#advanced_search_form label[for="search_with_descriptor_values_10"] {
	content: "Power/Toughness";
}

#advanced_search_form #variant_filters .variant_descriptor {
	float: left;
	padding: 0.5rem 1rem 0 0;
	width: 50%;
}

#advanced_search_form .clear {
	clear: both;
	content: " ";
	display: table;
}

/*----------------------------------------------------------------------
	MultiSearch
----------------------------------------------------------------------*/

#multisearch {
	text-align: right;
}
#multisearch textarea {
	display: block;
	margin-bottom: 1em !important;
}