/*****
 * Global Styles
 *****/

* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}

html {
    background-color: #BBB;
}

body {
    font-family: Arial, sans-serif;
    font-size: 80%;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

img {
    border: none;
}

a {
    color: #143FAA;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*****
 * Core page elements
 *****/

#nav {
	background-color: #000;
	width: 77.344em;
	padding: .7em 1em;
	margin: auto;
	overflow: hidden;
}

#content {
	width: 73.438em;
	margin-right: auto;
	margin-left: auto;
}

#footer {
	width: 73.438em;
	margin: 1.5em auto 3em;
	text-align: right;
	text-shadow: 0 1px #fff;
}

#footer a {
	color: #000;
}

#footer .floater {
	float: right;
}

#footer .in-touch {
	float: left;
}

#footer .footer-links {
	float: left;
	list-style: disc inside;
}

#footer .footer-links li {
	float: left;
	margin-left: 0.8em;
}

#footer .footer-links li:first-child {
	list-style: none;
}

#footer .twitter-link {
	padding-bottom: 1px; /* For Twitter logo */
	padding-left: 25px;
}

#nav ul {
	float: left;
	font-size: 1.45em;
	list-style-type: none;
}

#nav a {
    text-decoration: none;
    color: #FFF;
}

#nav a:hover {
    text-decoration: underline;
}

#nav li {
    float: left;
    margin-right: 1.2em;
}

#searchNav {
    position: relative;
    line-height: .9em;
    float: right;
}

#searchNav .searchSubmit {
    border: none;
    height: 16px;
    width: 16px;
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -8px;
    text-indent: -9999px; /* Move text off screen leaving just image */
}

#q {
    border: none;
    padding: 3px;
}

#searchNav input,
#searchNav label {
    line-height: 22px;
    height: 16px;
}

* + html #searchNav label {
    height: auto;
    line-height: 25px; /* Heights are goofy in IE7 */
}

#searchNav label {
    color: #777;
    position: absolute;
    padding-left: .3em;
    display: none;
}

/*****
 * Front page intro
 *****/

#intro .grid {
	float: left;
	padding-right: 15px;
	padding-top: 1.5em;
	width: 297px;
}

#intro .gridimg {
    float: left;
    display: block;
    width: 25%;
    margin-top: 1.5em;
}

#intro .card-wrapper,
#intro .blpDescription,
#intro .grid-container {
    text-align: center;
    float: left;
    width: 33%;
}

/* "#intro" needed for specificity */
#intro .blpDescription {
    text-align: right;
    margin-top: 1.1em;
    font-family: Georgia, serif;
    font-size: 1.8em;
}

#intro .grid-container {
	height: 311px;
	overflow: hidden;
	position: relative;
}

#intro .grid-inner-container {
	position: relative;
	width: 1250px;
}

#nav,
.cardSetNavWrapper,
.chartsNavWrapper,
.cardSetWrapper,
.chartsWrapper,
.searchResults,
.contentWrapper {
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.cardSetWrapper,
.chartsWrapper {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
}

.cardSetNavWrapper,
.chartsNavWrapper {
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
}

#nav {
    -moz-border-radius-topright: 0;
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
}

.searchResults,
.contentWrapper {
    background-color: #FFF;
    border: 1px solid #777;
    padding: 1.5em;
}

/*****
 * Space between top level nav and actual page content
 *****/

.searchResults,
.cardSetWrapper,
.cardSetNav,
.contentWrapper,
.chartsWrapper,
.chartsNav {
    margin-top: 1.3em;
}

/*****
 * Blog
 *****/

#blog h3 {
    font-size: 1.6em;
}

.listHeader {
    font-family: Georgia, serif;
    border-bottom: 1px dotted #777;
    font-weight: normal;
    font-size: 2.2em;
}

#blog h4 {
    margin-bottom: 1em;
}

#blog ul {
    margin: auto 2em;
}

#blog li {
    margin-bottom: .7em;
}

#blog .entryDetail,
#blog .entry {
    font-size: 1.15em;
    padding: .5em;
}

#blog .entryDetail h1 {
	float: left;
}

#blog .entry {
    margin-top: 1em;
}

#blog pre {
    border-width: 1px;
    border-color: #bbb;
    border-style: solid none;
    padding: .5em .75em;
    margin: 1em .5em;
    background-color: #f0f0ff;
}


#blog p {
    margin: .7em auto;
}

#blog .date {
    color: #888;
    margin-top: 0;
    font-size: .9em;
}

#blog textarea {
    width: 100%;
    font-size: 11px;
}

#blog dl {
    padding-left: 1em;
    margin-bottom: 1.5em;
}

#blog dd {
    padding-left: 1em;
    margin-bottom: .5em;
}

.homepage-blog {
  width: 43.82em;
  float: left;
}

.homepage-fb {
  float: right;
  margin-left: 1.3em;
  min-height: 80px;
  width: 22em;
}

.homepage-fb .fb-activity {
  margin-bottom: -10px;
  margin-left: -10px;
  margin-right: -10px;
}

/*****
 * Card search
 *****/

.cardSearch {
    float: left;
    width: 33%;
    padding-top: 9em;
}

.cardSearch label {
    font-size: 1.4em;
    display: block;
}

/*****
 * Charts
 *****/

.cardSetWrapper,
.chartsWrapper {
    background-color: #FFF;
    width: 61.563em;
    margin-left: 11.719em;
    float: left;
    border: 1px solid #777;
}

.chartsWrapper form {
    margin: 1em 0;
    font-size: .9em;
}

.chartsWrapper form label {
    display: none;
}

.cardSet h1 {
	float: left;
}

.cardSet dt {
    float: left;
    margin-right: .5em;
}

.cardSet,
.charts {
    padding: 1.5em 1.5em 2em;
}

.charts > h1 {
    font-weight: normal;
}

.cardSet .agg {
    font-size: 1.2em;
    color: #666666;
}

.alphabetical h1 {
    float: left;
}

.alphabetical .resultsNav {
    line-height: 2.4em;
    text-align: right;
    margin-top: 0;
}

.list {
    margin-top: 1.8em;
}

.list h2 {
    border-top: 1px dotted #777;
    padding: .9em 1em 0 1em;
    margin-bottom: .5em;
    font-weight: normal;
}

.list table {
    width: 100%;
    border-collapse: collapse;
}

.list table td {
    padding-top: .24em;
    padding-bottom: .24em;
}

.list table .odd {
    background-color: #E9E9FF;
}

.list h3 {
    text-indent: 1em;
    margin-bottom: 0.6em;
}

.list .priceCell,
.list .rankCell,
.list .topTenCell {
    text-align: right;
}

.list .priceCell,
.list .volumeCell {
    width: 15%;
}

.list .volumeCell {
    padding-left: 2em;
}

.list .rankCell {
    width: 4%;
    padding-right: 0.7em;
    padding-left: 0.5em;
}

.list .contentCell {
    text-indent: 0.3em;
}

.list .contentCell div {
    font-size: 0.9em;
    height: 20px;
    line-height: 20px;
}

.list .contentCell a {
    font-weight: bold;
}

.list .bar {
    color: #FFF;
}

.list .barBrown {
    margin-top: 0.3em;
}

.list .imgCell {
    width: 68px; /* 64px img width + 1px padding + 1px border */
}

#intro .gridimg img,
.list .imgCell img {
    border: 1px solid #777;
    padding: 1px;
}

.list .topTenCell {
    font-size: 1.8em;
    width: 1em;
    vertical-align: top;
    padding-right: 0.5em;
}

.list .rank-change {
  color: #999;
  font-size: 0.7em;
}

.list .nameCell {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.seeMore {
    text-align: right;
    font-size: 1.1em;
}

.seeMore a {
    padding-right: 20px; /* For arrow_right.gif */
    color: #4444BF;
}

.cardSetNav,
.chartsNav {
    text-align: center;
    width: 11.719em;
    margin-left: -73.438em;
    float: left;
}

.cardSetNavWrapper,
.chartsNavWrapper {
    text-align: left;
    background-color: #FFF;
    border-width: 1px;
    border-color: #777; 
    border-style: solid none solid solid;
    width: 100%;
    margin-bottom: 1.25em;
}

.cardSetNav ul,
.chartsNav ul {
    list-style-type: none;
}

.cardSetNav a,
.chartsNav a {
    color: #999;
    display: block;
    padding: .5em .7em;
    text-decoration: none;
}

.cardSetNav li,
.chartsNav li {
    border-width: 1px;
    border-color: #777;
    border-style: solid solid none none;
}

.cardSetNav .active,
.chartsNav .active {
    border-right-style: none;
}

.cardSetNav .active a,
.chartsNav .active a {
    font-weight: bold;
    color: #000;
}

.cardSetNav .first,
.chartsNav .first {
    border-top-style: none;
}

/*****
 * Card details
 *****/

.up {
    color: #408040;
}

.down {
    color: #BF3030;
}

.cardDetail h1 {
    float: left;
    font-size: 1.7em;
}

.cardDetail .price-table {
    clear: both;
    margin: .5em 0;
    width: 70%;
}

.cardDetail td {
    white-space: nowrap;
}

.cardDetail .price {
    font-size: 2.5em;
}

.cardDetail .price span {
    font-size: .7em;
}

.cardDetail .key,
.cardDetail .val,
.cardDetail .main {
    width: 1%;
}

.cardDetail .key {
    color: #444;
    text-align: left;
    font-weight: bold;
    padding-right: .1em;
}

.cardDetail .val {
    padding-left: .1em;
    text-align: right;
}

#commentlist {
    margin-top: 1em;
    list-style-type: none;
}

#commentlist ul,
#commentlist pre,
#commentlist p {
    margin: 1em 0;
}

#commentlist h4 {
    font-size: 1.1em;
    background-color: #F0F0FF;
    border-bottom: 1px solid #ccc; 
    padding: .2em .4em;
    margin-bottom: 0;
}

#commentlist div {
    padding: 0 1em;
}

#commentlist div ol,
#commentlist div ul {
    padding-left: 2em;
}

.permalink {
    text-decoration: none;
    visibility: hidden;
    color: #C60F0F;
    padding: 2px 4px;
    font-size: .8em;
}

#blog #commentform,
#blog #commentlist {
    font-size: .869em; /* Negate the 1.15em font-size on the blog */
}

#blog #commentlist li {
    margin-bottom: 0;
}

#commentlist .date {
    color: #888;
    font-weight: normal;
    font-size: .8em;
}

#commentform h4 {
    font-size: 1.1em;
    margin-bottom: .8em;
}

#commentform {
    background-color: #F0F0FF;
    border-width: 1px;
    border-color: #ccc;
    border-style: solid none none none;
    padding: .8em 1em;
    margin: 4% 0 0 5%;
    width: 70%;
    font-size: .9em;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
}

#commentform p {
    margin-bottom: 1em;
}

#commentform .submit {
    margin-bottom: 0;
}

#commentform textarea {
    width: 100%;
}

.cardDetail .left {
    float: left;
    width: 73%;
}

.cardDetail .right img {
    margin-top: 1em;
}

.cardDetail .right {
    width: 25%;
    margin-left: 1%;
    float: right;
}

.cardDetail .right ul {
    list-style-type: none;
}

.cardDetail .right li {
    border-width: 1px;
    border-top-style: dotted;
    border-color: #999;
}

.cardDetail .right li.last {
    border-bottom-style: dotted;
}

.cardDetail .right ul a,
.cardDetail h2 {
    padding: .2em .5em;
}

.cardDetail .right ul a {
    color: #494980;
    display: block;
    text-decoration: none;
}

li .inlinePrice {
    float: right;
}

#blog .comments,
#blog #comments {
    font-size: 1em;
    font-weight: normal;
}

#blog #comments {
	margin-bottom: 1em;
	display: inline-block;
}

.cardDetail h2 {
    font-size: .9em;
    margin-top: 1em;
    margin-bottom: .3em;
    text-align: right;
}

.cardDetail h2,
.cardDetail h3 {
    font-weight: normal;
}

.cardDetail .right ul a:hover .up {
    color: #A0FFA0;
}

.cardDetail .right ul a:hover .down {
    color: #FFA0A0;
}

.cardDetail .right ul a:hover {
    color: #fff;
    background-color: #494980;
}

#chart_div {
    clear: left;
    width: 100%;
    height: 300px;
    margin-bottom: 2.5em;
}

#compare_div {
	background: #f2f2f2;
	padding: 5px;
	margin-top: 15px;
	font-size: 0.9em;
	border: 1px solid #cccccc;
	border-bottom-width: 0;
}

#compare_div label {
	font-weight: bold;
	margin-right: 0.5em;
}

#compare_div input {
	font-size: 0.9em;
}

#compare_div .checkbox {
	margin-left: 1em;
	margin-right: 0.2em;
}

#tcgplayer_div {
	border-bottom: 1px dotted #999;
}

#tcgplayer_div h3 {
	border-bottom: 1px dotted #999;
    font-family: Georgia, serif;
	font-size: 1.2em;
}

#tcgplayer_div table {
	width: 100%;
}

#tcgplayer_div .deal {
	font-weight: bold;
}

#tcgplayer_div .diff {
	padding-left: 0.2em;
	font-size: 0.8em;
}

#tcgplayer_div .buy-cell {
	text-align: right;
}

#tcgplayer_sig {
	float: right;
	font-size: 0.7em;
	color: #666;
	margin-bottom: 2.5em;
	margin-top: 0.5em;
}

#tcgplayer_sig b {
	font-weight: normal;
}

/*****
 * Search results
 *****/

.searchResults h2 {
    font-size: 1.5em;
    margin: .7em 0 .6em 0;
}

.searchResults label {
    display: none;
}

.searchResults h1,
.searchResults form {
    margin-bottom: .5em;
}

.searchResults .moreHeader,
.searchResults form {
    border: 0 dotted #999;
}

.searchResults .moreHeader {
    border-top-width: 1px;
    padding-top: .7em;
}

.searchResults form {
    border-bottom-width: 1px;
    padding-bottom: 1em;
    margin-bottom: 1em;
}

.searchResults ul {
    list-style-type: none;
}

.searchResults ul li {
    font-size: 1.2em;
    margin-bottom: .3em;
}

.searchResults ul span {
    font-weight: bold;
}

.count {
    color: #666;
}

.list .resultsNav {
    text-align: right;
    margin-top: .5em;
}

.resultsNav {
    margin-top: 1.7em;
}

.resultsNav a {
    color: #4444BF;
    text-decoration: none;
    border: 1px solid #999;
}

.resultsNav a,
.resultsNav span {
    padding: .2em .4em;
}

.resultsNav .single {
    padding-left: 0em;
}

.resultsNav a:hover {
    background-color: #494980;
    border-color: #036;
    color: #fff;
}

/*****
 * Dialog
 *****/

.chartsFullImage .ui-dialog-titlebar {
    display: none;
}

.chartsFullImage .ui-dialog-content .dialogContent {
    background-color: #000;
    height: 292px;
    overflow: hidden;
}

.chartsFullImage .ui-dialog-content .dialogContent img {
    margin-top: -8px;
}

.chartsFullImage .ui-dialog-content .dialogTop,
.chartsFullImage .ui-dialog-content .dialogBottom {
    height: 8px;
    background-color: transparent;
    background-repeat: no-repeat;
}

.chartsFullImage .ui-dialog-content .dialogBottom {
    background-position: bottom left;
}

.chartsFullImage .ui-dialog-content .dialogTop {
    background-position: top left;
}

/*****
 * Float enclosing styles
 *****/

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

* + html .clearfix,
* html .clearfix {
	height: 1%;
}

.cardDetail:after,
#nav ul:after,
#content:after,
#intro:after,
#blog:after,
#blog .entry:after,
#footer:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

* html .cardDetail,
* html #nav ul,
* html #content,
* html #intro,
* html #blog,
* html #blog .entry,
* html #footer {
    height: 1%;
}

* + html .cardDetail,
* + html #nav ul,
* + html #content,
* + html #intro,
* + html #blog,
* + html #blog .entry,
* + html #footer {
    height: 1%;
}

/*****
 * Facebook
 *****/
.fb-like {
	margin-left: 8px;
	padding-top: 2px;
}

.cardSet .fb-like {
	padding-top: 4px;
}

.entryDetail .fb-like {
	padding-top: 6px;
}

.fb-comments-count {
	display: inline;
}

.fb-login-button {
	float: right;
	margin-right: 1em;
}

/*****
 * Twitter
 *****/

.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.twipsy-arrow{position:absolute;width:0;height:0;}
.popover{position:absolute;top:0;left:0;z-index:1000;padding:5px;display:none;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
.popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
.popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
.popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
.popover .arrow{position:absolute;width:0;height:0;}
.popover .inner{background:#000000;background:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden; /*width:280px;*/ -webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
.popover .title{display:none;background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;}