/*****
 * 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 0;
    margin: auto;
}

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

#footer {
    width: 71.8em;
    margin: 1.5em auto;
    text-align: center;
}

#footer a {
    color: #000;
}

#emailLink {
	float: left;
}

#dreamhostLink {
	text-align: right;
}

#dreamhostLink img {
	vertical-align: top;
}

#nav ul {
    font-size: 1.4em;
    padding: 0 1em;
    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;
}

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

#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: 2px;
}

#searchNav input,
#searchNav label {
    line-height: 20px;
    height: 16px;
    font-size: .68em;
}

* + 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 {
    padding-top: 1.5em;
}

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

#intro .grid span {
    display: block;
    font-size: 1.5em;
}

#intro .grid span a {
    padding-right: 20px;
}

#intro p {
    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;
}


#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 h2,
#blog h3 {
    font-size: 1.6em;
}

#blog .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 .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;
}

/*****
 * 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 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: .6em;
}

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

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

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

.list .rankCell {
    color: #666;
    width: 4%;
    padding-right: .7em;
    padding-left: .5em;
}

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

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

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

.list .bar {
    color: #FFF;
}

.list .barBrown {
    margin-top: .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: .5em;
}

.list .nameCell {
    padding-left: .5em;
    padding-right: .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 {
    font-size: 1.7em;
}

.cardDetail table {
    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;
    display: inline;
    font-weight: normal;
    margin-bottom: 1.5em;
}

.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: 4em;
}

/*****
 * 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
 *****/

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

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

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