/*
Theme Name: The Foxloft
Theme URI: http://foxloft.com
Description: Foxloft.com new theme.
Version: 1.0
Author: Roman Zenka
*/

body, table {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    border: 0;
    margin: 0;
    padding: 0;
}

body {
    background-color: #3A4A69;
    color: white;
}

body.narrow {
    background-image: url(/files/images/glassbg.gif);
    background-repeat: repeat-y;
    background-position: center;
}

div#topbanner {
    padding: 0;
    margin: 0;
    display: block;
    height: 145px;
    background-image: url(/files/artwork/foxexotics-topbanner-head.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000;
}

body.narrow div#topbanner {
    padding: 0;
    margin: 0;
    display: block;
    height: 145px;
    background-image: url(/files/artwork/foxexotics-topbanner-bg.gif);
    background-repeat: repeat-x;
    background-position: top left;
}

body.narrow div#topbackground {
    background-image: url(/files/artwork/foxexotics-topbanner-narrow.jpg);
    background-repeat: no-repeat;
    background-position: center;
}

div#topbanner h1 {
    display: block;
    margin: 0 auto;
    font-size: 0;
    color: black;
    width: 622px;
    height: 145px;
    background-image: url(/files/artwork/foxexotics-topbanner-center.jpg);
    background-repeat: no-repeat;
}

#headerbanner {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 145px;
    text-align: center;
}

#headerbanner div {
    margin: 0 auto;
    width: 622px;
    height: 145px;
    position: relative;
}

#headerbanner div h2 {
    display: block;
    position: absolute;
    left: 300px;
    top: 30px;
    width: 403px;
    height: 75px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    font-size: 0;
    color: black;
}

.buttonstripe {
    text-align: center;
    margin: 0 auto;
}

.buttonstripe ul {
    list-style-type: none;
    list-style-position: inside;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0 auto;
}

.buttonstripe ul li {
    display: block;
    float: left;
    text-align: center;
    margin: 0 4px;
}

.buttonstripe a {
    display: block;
    float: left;
    margin: 12px 0 0 0;
}

.buttonstripe a img {
    display: block;
    float: left;
}

.buttonstripe ul li span {
    display: block;
    clear: left;
    text-align: center;
}

table.clear {
    clear: both;
}

div#content {
    margin: 1em;
}

div#last_modified {
    margin: 1em 38% 1em 38%;
    text-align: center;
}

h1 {
    font-size: 20px;
    font-weight: normal;
    text-align: center
}

h2 {
    font-size: 16px;
}

h3 {
    font-size: 14px;
}

h4 {
    font-size: 12px;
}

.comingsoon {
    border: 2px #000 solid
}

td.paypal {
    width: 300px;
    vertical-align: middle;
    text-align: center;
}

#topmenu {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 145px;
    text-align: center;
}

#topmenu div {
    display: block;
    margin: 0 auto;
    text-align: left;
    position: relative;
    width: 622px;
    height: 145px;
}

#topmenu div ul {
    list-style-type: none;
    list-style-position: inside;
    margin: 0;
    padding: 0;
    width: 622px;
    height: 145px;
    position: relative;
}

#topmenu div ul li {
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 0;
    height: 0;
}

#topmenu div ul li a {
    display: block;
    position: relative;
    font-size: 0;
    color: black;
    background-image: url(/files/artwork/foxexotics-highlight.gif);
    background-position: 0 -100px; /* Hide */
    background-repeat: no-repeat;
}

#topmenu div ul li#menu-shop a {
    width: 70px;
    height: 45px;
    left: 0px;
    top: 100px;
}

#topmenu div ul li#menu-shop-cart a {
    width: 40px;
    height: 45px;
    left: 70px;
    top: 100px;
}

#topmenu div ul li#menu-artwork a {
    width: 123px;
    height: 45px;
    left: 110px;
    top: 100px;
}

#topmenu div ul li#menu-about a {
    width: 93px;
    height: 45px;
    left: 233px;
    top: 100px;
}

#topmenu div ul li#menu-exotics a {
    width: 110px;
    height: 45px;
    left: 326px;
    top: 100px;
}

#topmenu div ul li#menu-contact a {
    width: 122px;
    height: 45px;
    left: 436px;
    top: 100px;
}

#topmenu div ul li#menu-shop a:hover, #topmenu div ul li#menu-shop a:active {
    background-position: 14px 23px;
}

#topmenu div ul li#menu-shop-cart a:hover, #topmenu div ul li#menu-shop-cart a:active {
    background-position: -56px 23px;
}

#topmenu div ul li#menu-artwork a:hover, #topmenu div ul li#menu-artwork a:active {
    background-position: -96px 23px;
}

#topmenu div ul li#menu-about a:hover, #topmenu div ul li#menu-about a:active {
    background-position: -219px 23px;
}

#topmenu div ul li#menu-exotics a:hover, #topmenu div ul li#menu-exotics a:active {
    background-position: -312px 23px;
}

#topmenu div ul li#menu-contact a:hover, #topmenu div ul li#menu-contact a:active {
    background-position: -422px 23px;
}

h2 {
    font-size: 20px;
    margin: 1em 0;
}

h3 {
    font-size: 16px;
    margin: 1em 0;
}

.art-stripe {
    padding: 0 0;
    overflow: hidden;
    text-align: left;
    height: 104px
}

.art-stripe a {
    margin: 2px 2px;
    overflow: hidden;
    text-align: left;
    height: 104px
}

.gallery-page h3 {
    font-weight: normal;
    text-align: left;
    margin: 20px 0 0;
}

.organized-thumbnails a {
    display: block;
    float: left;
    width: 170px;
    height: 170px;
    text-align: center;
    vertical-align: middle;
    line-height: 168px;
    background-image: url(/images/tileborder.gif);
    background-repeat: no-repeat;
    position: relative;
}

.organized-thumbnails a span {
    display: block;
    position: absolute;
    top: 138px;
    line-height: 20px;
    vertical-align: bottom;
    height: 20px;
    overflow-y: hidden;
    background: rgb(58, 74, 105); /* fallback color */
    background: rgba(58, 74, 105, 0.8);
}

div#last_modified {
    background-color: #293958;
    border: 2px solid #5C6C8B;
}

a {
    text-decoration: none;
}

a:link {
    color: #BFE3FF;
}

a:active {
    color: #f8f8ff;
    text-decoration: underline;
}

a:visited {
    color: #8CB0DD;
}

a:hover {
    color: #DFF3FF;
    text-decoration: underline;
}

a img {
    border-color: #8FC3FF #7FB3ED #7FB3ED #8FC3FF;
    border-width: 2px;
    border-style: solid;
}

a:visited img {
    border-color: #4F83AF #3F73AD #3F73AD #4F83BF;
    border-width: 2px;
    border-style: solid;
}

a:hover img {
    border-color: #CFF3FF #AFD3FF #AFD3FF #CFF3FF;
    border-width: 2px;
    border-style: solid;
}

#menu {
    float: right;
}

.narrow-column {
    width: expression(document.body.clientWidth > 860? "860px": "auto" );
    max-width: 860px;
    text-align: justify;
    margin: 0 auto;
    position: relative;
}

.leftpic {
    margin: 0 1em 1em 0;
    float: left;
}

tr.mouseOver {
    background-color: #304060;
}

.galleryTitle {
    text-align: center;
}

/* Tshirts */
a.tshirt-link {
    width: 227px;
    height: 227px;
    display: inline-block;
    position: relative;
}

.tshirt-link img {
    width: 225px;
    height: 225px;
}

.tshirt-link .tshirt-title {
    text-align: center;
    position: absolute;
    left: 2px;
    top: 195px;
    width: 225px;
    height: 30px;
}

.tshirt-link .tshirt-title span {
    display: block;
    width: 220px;
    height: 30px;
    line-height: 30px;
    overflow-y: hidden;
    background: rgb(58, 74, 105); /* fallback color */
    background: rgba(58, 74, 105, 0.7);
    font-size: 14px;
}

/* Pendants */
#pendants {
    border: 0;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}

#pendants tr td {
    padding: 5px;
}

#pendants .glyph {
    text-align: center;
}

#pendants .species {
    text-align: center;
}

#pendants .symbolism {
    padding-right: 15px;
    padding-left: 15px;
}

/* Single pendant */
#pendant {
    position: relative;
    border: 0;
}

a.colbtn {
    width: 64px;
    height: 29px;
    display: block;
    text-align: center;
    line-height: 25px;
    float: left;
    border: 0px;
}

a:hover.colbtn {
    background-color: #304060;
}

a.colbtn-sel {
    background-color: #283858;
}

a:hover.colbtn-sel {
    background-color: #203050;
}

.linkimg0 {
    position: absolute;
    left: -5px;
    top: -23px;
    background-image: url(/files/images/pendants/link.gif);
    width: 16px;
    height: 27px;
}

.linkimg1 {
    position: absolute;
    left: -5px;
    top: -23px;
    background-image: url(/files/images/pendants/link_cord.gif);
    width: 16px;
    height: 27px;
}

a.cordbtn {
    height: 29px;
    display: block;
    text-align: center;
    line-height: 25px;
    border: 0px;
}

a:hover.cordbtn {
    background-color: #304060;
}

a.cordbtn-sel {
    background-color: #283858;
}

a:hover.cordbtn-sel {
    background-color: #203050;
}

a.cordlenbtn {
    width: 64px;
    height: 29px;
    display: block;
    text-align: center;
    line-height: 25px;
    float: left;
    border: 0px;
}

a:hover.cordlenbtn {
    background-color: #304060;
}

a.cordlenbtn-sel {
    background-color: #283858;
}

a:hover.cordlenbtn-sel {
    background-color: #203050;
}

.cart-button {
    border: 0;
    padding: 0;
    margin: 4px 0 0 15px;
    text-align: center;
    display: block;
    width: 170px;
    height: 115px;
    background-image: url(/files/images/foxcart.gif);
}

.cart-button:hover, .cart-button:active {
    background-position: 0 -115px;
}

/* Right-side blurb */
.blurb {
    float: right;
    margin: 0 0px 20px 20px;
    padding: 10px;
    background-color: #304069;
    border: 1px solid black;
    border-radius: 1em;
    -moz-border-radius: 1em;
}

dt {
    font-weight: bold;
    margin-bottom: 0.2em;
}

dd {
    margin-bottom: 0.5em;
}

.large-pendant-list {
    line-height: 18px;
}

.large-pendant-list span {
    font-size: 17px;
    font-weight: bold;
}

.recipe-list {
    vertical-align: top;
    width: 180px;
    text-align: center;
    margin: 0 auto;
}

.recipe-list h3 {
    background-color: #21304D;
    padding: 10px;
    margin: 4px 0 10px 0;
}

.recipe-list ul {
    list-style-type: none;
    list-style-position: outside;
    padding: 0;
    margin: 0 0;
    width: 100%;
}

.recipe-list ul li {
    padding: 0;
    margin: 8px 0 8px 0;
}

.recipe-body {
    padding: 0;
    text-align: left;
}

.recipe-body h2 {
    line-height: 1.2em;
}

.recipe-body p {
    margin: 5px 5px 5px 10px;
}

.recipe-body table {
    margin: 5px 5px 5px 10px;
}

.recipe-ingredients, .recipe-directions {
    padding-left: 10px;
    background-color: #21304D;
    line-height: 2em;
    height: 2em;
    display: block;
}

.recipe-description {
    padding-left: 10px;
}

.image-sale .price {
    font-weight: bold;
    text-align: center;
    padding: 0 5px;
    white-space: nowrap;
}

.image-sale .original .price, .image-sale .desc .original-text {
    color: #ff0;
    font-weight: bold;
}

.sale-info {
    text-align: right;
}

.noscript {
    position: absolute;
    z-index: 100;
    background-color: #eedd44;
    color: #300;
    padding: 3px;
    font-weight: bold;
    top: 0;
    left: 0;
}

.noscript a {
    color: #f00;
}

.see-also-transparent {
    filter: alpha(opacity = 50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

/* Testimonials page */
table#testimonials tr td {
    vertical-align: top;
}