@charset "utf-8";

/* resets */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, 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
{ margin: 0;  padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent;}
table { border-spacing: 0; border-collapse: collapse; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote, q { quotes: none; }
:focus { outline: 0; }


/* utils */

.clear          { clear: both; }
.clearleft      { clear: left; }
.clearright     { clear: right; }
.mb20           { margin-bottom: 20px; }
.mb10           { margin-bottom: 10px; }
.mb5            { margin-bottom: 5px; }
.floatleft      { float: left; }
.floatright     { float: right; }
.hide           { display: none; }
.show           { display: block; }
.abs-bl         { position: absolute; bottom: 10px; left: 10px; }
.abs-br         { position: absolute; bottom: 10px; right: 10px; }


/* typography */

textarea, input, html
{ font-size: 13px; line-height: 17px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: normal; color: #333; }

h1, h2, h3, h4, h5
{ font-family: Helvetica Neue, Helvetica, Arial, sans-serif; color: #333; }

a          { color: #666; }
a:hover    { color: #E21F26; }
ul         { list-style: none; }
p          { margin: 5px 0 15px 0; }

h1         { font-size: 26px; line-height: 30px; }
h2         { font-size: 24px; line-height: 28px; }
h3         { font-size: 20px; line-height: 24px; }
h4         { font-size: 12px; line-height: 14px; }
h5         { font-size: 10px; line-height: 14px; }

.quiet     { color: #999; }


/* lists */

.inline li { display: block; float: left; margin-right: 15px; color: #666; }
.block li  { display: block; float: none; }


/* container */

body {
    position: relative;
    text-align: center;
    padding: 0;
    margin: 0;
    background: #e9e9e9;
}
#container {
    position: relative;
    z-index: 0;
    text-align: left;
    clear: both;
    width: 900px;
    margin: 0 auto;
}


/* masthead */

#masthead {
    position: relative;
    height: 72px;
    width: 880px;
    background: #fff;
    margin: 10px 0 12px 0;
    padding: 8px 10px 0px 10px;
    border: 1px solid #ccc;
}
#branding {
    display: block;
    float: left;
    height: 70px;
    width: 352px;
    margin-bottom: 10px;
    background: #fff url(http://media.artocrats.com/images/elements/artocrats-logo-helvetica.png) 0px 10px no-repeat;
}
#auth {
    float: right;
    text-align: right;
}


/* dots */

.dotify a, .dotify li a, a.dotify {
    background: transparent url(http://media.artocrats.com/images/elements/dot-darkgrey-mini.png) center left no-repeat; }
.dotify a:hover, .dotify li a:hover, a.dotify:hover, .dotify-red li a, a.dotify-red {
    background: transparent url(http://media.artocrats.com/images/elements/dot-red-mini.png) center left no-repeat; }

.dotify a span, a.dotify-red span { padding-left: 11px; }


/* quote */
.quote {
    position: relative;
    max-width: 500px;
    margin-top: 5px;
    padding: 0 25px 0 25px;
    background: transparent url(http://media.artocrats.com/images/elements/quote-open.png) top left no-repeat;
}
.quote .endquote {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 15px;
    width: 18px;
    background: transparent url(http://media.artocrats.com/images/elements/quote-closed.png) top right no-repeat;
}

/* content */

#content { margin-top: 10px; }


/* columns */

    .column { background: #fff; }

    /* single column */
    .single-column {
        position: relative;
        clear: both;
        width: 878px;
        border: 1px solid #ccc;
        padding: 8px 10px;
        background: #fff;
        margin-bottom: 10px;
    }

    /* two column wide left */
    .two-col-wide-l {
        clear: both;
        position: relative;
        margin-bottom: 10px;
    }
    .two-col-wide-l .left {
        float: left;
        border: 1px solid #ccc;
        width: 514px;
        padding: 8px 10px;
        margin-right: 10px;
    }
    .two-col-wide-l .right {
        float: left;
        border: 1px solid #ccc;
        width: 332px;
        padding: 8px 10px;
    }
    .two-col-wide-l .right .details {
        font-size: 12px;
    }

    /* two column 2 l */
    .two-col-two-l {
        clear: both;
        position: relative;
        margin-bottom: 10px;
    }
    .two-col-two-l .left {
        float: left;
        border: 1px solid #ccc;
        width: 332px;
        padding: 8px 10px;
        margin-right: 10px;
    }
    .two-col-two-l .right {
        float: left;
        width: 514px;
        border: 1px solid #ccc;
        padding: 8px 10px;
    }
    .two-col-two-l .right .details {
        font-size: 12px;
    }

    /* two column small left */
    .two-col-sm-l {
        clear: both;
        position: relative;
        margin-bottom: 10px;
    }
    .two-col-sm-l .left {
        float: left;
        border: 1px solid #ccc;
        width: 150px;
        padding: 8px 10px;
        margin-right: 10px;
    }
    .two-col-sm-l .right {
        float: left;
        border: 1px solid #ccc;
        width: 695px;
        padding: 8px 10px;
    }

    /* three column */
    .three-column {
        clear: both;
        position: relative;
        margin-bottom: 10px;
    }
    .three-column .left {
        float: left;
        width: 328px;
        border: 1px solid #ccc;
        padding: 8px 10px;
        margin-right: 10px;
    }
    .three-column .middle {
        float: left;
        padding: 8px 10px;
        margin-right: 10px;
        width: 328px;
        border: 1px solid #ccc;
    }
    .three-column .right {
        float: left;
        padding: 8px 10px;
        width: 158px;
        border: 1px solid #ccc;
    }

    /* pieces columns */
    .piece-profile-cols { margin-bottom: 10px; }
    .piece-profile-cols .left {
        float: left;
        padding: 8px 10px;
        width: 514px;
        margin-right: 10px;
        background: #fff;
        border: 1px solid #ccc;
    }

    .piece-profile-cols .right {
        position: relative;
        float: left;
    }

    .piece-profile-cols .right .col {
        position: relative;
        padding: 8px 10px;
        width: 332px;
        border: 1px solid #ccc;
        background: #fff;
        margin-bottom: 10px;
    }

    .piece-profile-cols .right .detail h3 {
        margin-bottom: 5px;
    }

    .piece-profile-cols .right .quote {
        position: relative;
        float: right;
        max-width: 145px;
        margin-top: 5px;
        padding: 0 25px;
        margin-bottom: 45px;
        background: transparent url(http://media.artocrats.com/images/elements/quote-open.png) top left no-repeat;
    }
    .piece-profile-cols .right .quote .endquote {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 15px;
        width: 18px;
        background: transparent url(http://media.artocrats.com/images/elements/quote-closed.png) top right no-repeat;
    }

    .piece-profile-cols .right #modify-piece {
        position: absolute;
        top: 8px;
        right: 10px;
    }
    .piece-profile-cols .right .modify-icon {
        position: relative;
        display: block;
        text-align: right;
        height: 15px;
        width: 15px;
        padding: 0 20px 0 0;
    }

    .piece-profile-cols .right a.modify-icon {
        padding: 0 0 0 5px;
        display: block;
        float: right;
    }
    .piece-profile-cols .right a.modify-icon span {
        position: absolute;
        top: 15px;
        right: 0;
        width: 120px;
        display: none;
    }

    .piece-profile-cols .right .edit-piece {
        background: transparent url(http://media.artocrats.com/images/elements/edit.png) center right no-repeat;
    }
    .piece-profile-cols .right .delete-piece {
        background: transparent url(http://media.artocrats.com/images/elements/delete.png) center right no-repeat;
    }

    .piece-profile-cols .right .detail .param {
        font-size: 11px;
        line-height: 10px;
        color: #bbb;
    }

    .piece-profile-cols .right .share {
        position: absolute;
        bottom: 8px;
        right: 10px;
        width: 100px; float: right; text-align: right;
    }
    .piece-profile-cols .right .share .icon {
        margin-top: 5px;
    }
    .piece-profile-cols .right .share a {
	text-decoration: none;
    }

    .piece-profile-cols .right .tag-box {
        width: 225px;
    }

    .piece-profile-cols .right .detail .description {
        position: relative;
        float: right;
        max-width: 145px;
        margin-top: 5px;
        padding: 0 25px 0 25px;
        background: transparent url(http://media.artocrats.com/images/elements/quote-open.png) top left no-repeat;
    }
    .piece-profile-cols .right .detail .description .endquote {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 15px;
        width: 18px;
        background: transparent url(http://media.artocrats.com/images/elements/quote-closed.png) top right no-repeat;
    }

    .piece-profile-cols .right .bool {
        display: block;
        float: left;
        font-size: 14px;
        width: 120px;
        height: 20px;
        padding: 8px 10px 8px 40px;
        margin: 0 0 10px 0;
        border: 1px solid #ccc;
    }
    .piece-profile-cols .right .fav-on {
        background: #fff url(http://media.artocrats.com/images/elements/heart-red.png) 5px 5px no-repeat;
        text-decoration: none;
        color: #E21F26;
    }
    .piece-profile-cols .right .fav-off {
        background: #e2e2e2 url(http://media.artocrats.com/images/elements/heart-grey.png) 5px 5px no-repeat;
        text-decoration: none;
    }
    .piece-profile-cols .right a.fav-off:hover {
        text-decoration: underline;
        color: #666;
    }

    .list-nav .previous {
        position: absolute;
        top: 8px;
        left: 10px;
        display: block;
        width: 150px;
    }
    .list-nav .back-to-list {
        text-align: center;
        display: block;
        width: 880px;
    }
    .list-nav .next {
        position: absolute;
        top: 8px;
        right: 10px;
        display: block;
        width: 150px;
        text-align: right;
    }


    /* two column wide left */
    .comment-cols {
        clear: both;
        position: relative;
        margin-bottom: 10px;
    }
    .comment-cols .left {
        float: left;
        margin-right: 10px;
    }
    .comment-cols .left .leave-comment {
        position: relative;
        width: 514px;
        padding: 8px 10px;
        border: 1px solid #ccc;
        background: #fff;
        margin-bottom: 10px;
    }
    .comment-cols .left .leave-comment form {
	float: left;
    }
    .comment-cols .left .leave-comment textarea {
        font-size: 13px; line-height: 16px;
        vertical-align: top;
        padding: 5px;
        height: 50px;
        width: 416px;
        background: #eee url(http://media.artocrats.com/images/elements/leavecomment-txt.png) top left no-repeat;
        border: 1px solid #ccc;
    }
    .comment-cols .left .leave-comment #id_submit {
        margin-top: 10px;
        display: none;
    }
    .comment-cols .left .comment {
        position: relative;
        width: 514px;
        padding: 8px 10px;
        border: 1px solid #ccc;
        background: #fff;
        margin-bottom: 10px;
    }
    .comment-cols .left .comment-profile-thumb  {
        float: left; margin-right: 10px;
    }
    .comment-cols .left .comment .comment-detail {
        margin-left: 85px;
    }
    .comment-cols .right {
        float: left;
        background: #fff;
        border: 1px solid #ccc;
        width: 332px;
        padding: 8px 10px;
    }


/* browse columns */

.browse-cols { clear: both; position: relative; margin-bottom: 10px; }
#subnav {
    float: left;
    border: 1px solid #ccc;
    width: 514px;
    height: 18px;
    padding: 8px 10px;
    margin-right: 10px;
}
#subnav ul li { float: left; margin: 0; display: block; padding: 0 15px 0 0; position: relative; }
#subnav ul li a { float: left; }

#search {
    float: left;
    border: 1px solid #ccc;
    width: 352px;
    background: #fff;
}
#search input {
    font-size: 14px;
    width: 295px;
    padding: 8px 10px;
    background: #fff url(http://media.artocrats.com/images/elements/search-txt.png) center left no-repeat;
    border: none;
    height: 18px;
    color: #333;
}
#search button {
    position: absolute;
    display: block;
    float: left;
    top: 1px;
    right: 1px;
    padding: 0;
    width: 35px;
    height: 32px;
    border: none;
    background: transparent url(http://media.artocrats.com/images/elements/search.png) center center no-repeat;
}


/* gridssssss */

.grid {
    width: 910px;
    position: relative;
    z-index: 1;
    font-size: 12px;
    line-height: 16px;
}
.grid-item {
    position: relative;
    background: #fff;
    border: 1px solid #ccc;
    float: left;
    margin: 0 10px 10px 0;
    padding: 5px;
    width: 160px;
    overflow: visible;
}
.grid-item .image {
    height: 85px;
}

.grid-item .detail {
    position: absolute;
    z-index: 12;
    top: 109px;
    left: -1px;
    padding: 0 5px 5px 5px;
    background: transparent url(http://media.artocrats.com/images/elements/transparent-dot.png) top left repeat;
    width: 160px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.grid-item .grid-rating {
    padding-top: 3px;
    background: transparent url(http://media.artocrats.com/images/elements/transparent-dot.png) top left repeat;
}
.grid .alt { background: #f3f3f3; border: dotted 1px #ccc; }
.grid .alt .image { text-align: center; padding-top: 30px; height: 55px; }
.grid .current  { border-color: #E21F26; }

/* four col grid */
.fourcol-grid {
    clear: both;
    position: relative;
    margin-bottom: 10px;
}
.fourcol-grid .left {
    float: left;
    margin-right: 10px;
}
.fourcol-grid .left .col {
    display: block;
    border: 1px solid #ccc;
    width: 150px;
    padding: 8px 10px;
    margin-bottom: 10px;
}
.fourcol-grid .right {
    float: right;
    width: 718px;
}
.fourcol-grid .right .bar {
    float: right;
    border: 1px solid #ccc;
    width: 696px;
    padding: 8px 10px;
    background: #fff;
    margin-bottom: 10px;
}
.fourcol-grid .grid-item {
    position: relative;
    background: #fff;
    border: 1px solid #ccc;
    float: left;
    margin: 0 10px 10px 0;
    padding: 5px;
    width: 160px;
    overflow: visible;
}
.fourcol-grid .last-grid-item {
    margin-right: 0px;
}
.fourcol-grid .grid-item .image {
    height: 85px;
}

.fourcol-grid .grid-item .detail {
    position: absolute;
    z-index: 12;
    top: 109px;
    left: -1px;
    padding: 0 5px 5px 5px;
    background: transparent url(http://media.artocrats.com/images/elements/transparent-dot.png) top left repeat;
    width: 160px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.fourcol-grid .grid-item .grid-rating {
    padding-top: 3px;
    background: transparent url(http://media.artocrats.com/images/elements/transparent-dot.png) top left repeat;
}



/* memberships */

#memberships .details,
#memberships .price {
    height: 50px;
    padding: 5px 0 0;
}

#memberships .dots { height: 30px; background: #fff url('http://media.artocrats.com/images/elements/membership-dots.png') top left; margin-bottom: 3px; }
#memberships .level-1 .dots { background-position: 0px 0px; }
#memberships .level-2 .dots { background-position: 0px 90px; }
#memberships .level-3 .dots { background-position: 0px 60px; }
#memberships .level-4 .dots { background-position: 0px 30px; }

#memberships .name { display: block; text-decoration: none; color: #fff; font-size: 28px; line-height: 30px; height: 30px; padding: 30px 5px 5px;  }
#memberships a.name:hover { text-decoration: none; }
#memberships .level-1 .name { background-color: #ccc; }
#memberships .level-2 .name { background-color: #4e4e4e; }
#memberships .level-3 .name { background-color: #231F20; }
#memberships .level-4 .name { background-color: #E21F26; }
#memberships .level-5 .name { background-color: #EB008B; }

#memberships .gift-cert-title { padding: 36px 5px 32px; }

/* rating dots */

.rating {
    position: relative;
    padding-top: 2px;
}
.rating div {
    height: 9px;
    background: #ccc;
    width: 62px;
}
.rating div span {
    height: 9px;
    display: block;
    background: #4e4e4e;
}
.rating div span.user {
    background: #E21F26;
}

.rating ul {
    position: absolute;
    top: 1px;
    left: 0;
    height: 10px;
    width: 65px;
    z-index: 1;
}
.rating li {
    display: block;
    float: left;
    z-index: 3;
    padding-right: 3px;
    background: transparent url(http://media.artocrats.com/images/elements/dot-cutout.png) top left no-repeat;
}
.rating li a {
    display: block;
    float: left;
    height: 10px;
    width: 10px;
}
.rating li a:hover {
    background: transparent url(http://media.artocrats.com/images/elements/dot-red.png) top left no-repeat;
}

/* big*/
.rating-big {
    position: relative;
    padding-top: 2px;
}
.rating-big div {
    height: 59px;
    background: #ccc;
    width: 320px;
}
.rating-big div span {
    height: 59px;
    display: block;
    background: #4e4e4e;
}
.rating-big ul {
    position: absolute;
    top: 1px;
    left: 0;
    height: 60px;
    width: 332px;
    z-index: 1;
}
.rating-big li {
    display: block;
    float: left;
    z-index: 3;
    padding-right: 5px;
    background: transparent url(http://media.artocrats.com/images/elements/dot-cutout-big.png) top left no-repeat;
}
.rating-big li a {
    display: block;
    float: left;
    height: 60px;
    width: 60px;
}
.rating-big li a:hover {
    background: transparent url(http://media.artocrats.com/images/elements/dot-red-big.png) top left no-repeat;
}

.loading_indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    z-index: 1;
    height: 100%;
    width: 100%;
    background: url(/media/images/elements/spinner.gif) bottom right no-repeat;
}

.rating-box .loading_indicator {
    top: 5px;
    right: 5px;
    background-position: top right;
}


/* pagination */

.pagination-bottom {
    position: relative;
    z-index: 0;
    clear: both;
    width: 910px;
    margin-bottom: 10px;
}
.pagination-bottom .button {
    float: left;
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    text-decoration: none;
}
.pagination-bottom a.button:hover {
    border-color: #E21F26;
}
.pagination-bottom .active { background: #fff; }

/* four col pagination */
.pagination-fourcol {
    position: relative;
    z-index: 0;
    clear: both;
    width: 718px;
    margin-bottom: 10px;
}
.pagination-fourcol .button {
    float: left;
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    text-decoration: none;
}
.pagination-fourcol .floatright .button {
    margin: 0 0 0 10px;
}
.pagination-fourcol a.button:hover {
    border-color: #E21F26;
}
.pagination-fourcol .active { background: #fff; }


/* forms */

.default-form {
    position: relative;
    border: 1px solid #ccc;
    background: #fff;
    padding: 10px;
    margin-bottom: 10px;
    height: auto;
    visibility: auto;
}

.default-form .info                  { float: left; width: 200px; margin-right: 10px; }
.default-form .info h2               { margin-bottom: 20px; }

.default-form .detail                   { float: left; width: 640px; }
.default-form .detail .left table       { position: relative; float: left; width: 420px; margin-right: 10px; }
.default-form .detail .left th          { vertical-align: top; display: block; padding: 5px 0 0 0; width: 80px; margin-bottom: 10px; }
.default-form .detail .left td          { vertical-align: top; margin-bottom: 10px; }
.default-form .detail .left td input    { display: block; padding: 5px; width: 315px; background: #eee; border: 1px solid #ccc; }
.default-form .detail .left td textarea {
    font-size: 13px;
    padding: 5px;
    width: 315px;
    height: 100px;
    margin: 0 0 10px 0;
    background: #eee;
    border: 1px solid #ccc;
}
.default-form .detail .left td.checkbox input {
    float: left;
    width: 25px;
}
.default-form .detail .left .errorlist  { color: #933; display: block; margin: 0; padding: 0 0 5px 0; }

.default-form .detail .right         { position: relative; float: left; width: 210px; }
.default-form .detail .right .param   { margin-bottom: 5px; }
.default-form .detail .right input   { display: block; width: 200px; padding: 3px; background: #eee; border: 1px solid #ccc; margin-bottom: 10px; }
.default-form .detail .right select   { display: block; width: 206px; margin-bottom: 10px; }
.default-form .detail .right .errorlist  { color: #933; display: block; padding: 0 0 5px 0; }

.progress-container {
    width: 120px;
    position: relative;
    border: 1px solid #ccc;
}
.progress-bar {
    background: #bbb;
    height: 15px;
}

.submit-form {
    overflow: auto;
    height: auto;
    display: block;
}
.submit-form hr {
    clear: left;
    border: none;
    height: 1px;
    background: #999;
    display: block;
    margin: 15px 0 25px 0;
    padding: 0;
}

/* tables  */

.default-table              { width: 510px; margin: 0; position: relative; }
.default-table tr           { width: 100%; display: block; margin: 0 0 5px 0; }
.default-table tr th        { width: 40%; margin: 0 10px 5px 0; color: #999; }
.default-table tr td        { width: 55%; padding: 2px 0; }
.default-table tr td input {
    padding: 5px;
    background: #eee;
    border: 1px solid #ccc;
}
.default-table td input:focus { background: #f5f5f5; }

/* buttons */

button {
    padding: 4px 10px;
    background: #eee;
    border: 1px solid #ccc;
    color: #333;
}
button:hover { background: #e5e5e5; }


/* autocomplete */

.ac_results {
	padding: 0px;
	border: 1px solid #ccc;
	background-color: #fbfbfb;
	overflow: hidden;
	z-index: 99999;
}
.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}
.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: default;
	display: block;
	font: menu;
	font-size: 12px;
	line-height: 16px;
    text-align: left;
	overflow: hidden;
}
.ac_loading { background: white url('indicator.gif') right center no-repeat; }
.ac_odd { background-color: #eee; }
.ac_over { background-color: #ccc; }


/* home */

.hometables .homeform   { width: 250px; float: left; }
.hometables td,
.hometables th      { padding-bottom: 10px; }
.hometables input   {
    padding: 3px;
    border: 1px solid #ccc;
    background: #eee;
}


/* tag cloud */

.tagcloud           { line-height: 3em; width: 818px; padding: 40px; }
.tagcloud a         { text-decoration: none; padding: 0 5px 5px 0; }
.tagcloud a:hover   { text-decoration: none; }


/* footer */

#footer {
    clear: both;
    position: relative;
    height: 150px;
    margin-bottom: 130px;
}
#footer .left {
    float: left;
    border: 1px solid #ccc;
    height: 50px;
    width: 514px;
    padding: 8px 10px;
    margin-right: 10px;
    background: #fff;
}
#footer .left .footer-links {
    clear: left;
    padding-top: 20px;
}
#footer .left .copy {
    clear: left;
    color: #666;
}
#footer .right {
    float: left;
    border: 1px solid #ccc;
    width: 332px;
    height: 50px;
    padding: 8px 10px;
    background: #fff;
}
#footer .right #feedback {
    font-weight: normal;
    color: #999;
    vertical-align: top;
    padding: 5px;
    margin: 0 0 10px 0;
    background: #eee;
    border: 1px solid #ccc;
    width: 320px;
    height: 35px;
}
#footer .right p {
    color: #999;
    clear: right;
    float: right;
}


/* colors and leftovers */

.grey   { background: #e2e2e2; }
.white  { background: #fff; }
.mr0    { margin-right: 0px; }


/* security */

#id_honeypot { display: none; }