/*CSS for bathsheba.com
*/

/*HOUSEKEEPING*/
html{
  height: 100%;
  min-width: 320px;   /* we are not responsive below this size */
}

/*need relative here to position absolutely within body.*/
body {
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;

    max-width: 1000px;
    min-width: 320px;
    min-height: 100%;

    border-left: 1px solid rgb(230,230,230);
    border-right: 1px solid rgb(230,230,230);
}

/*most images don't have borders even when linked*/
a img {
    border: none;
}

/*paragraphs*/
p {
    margin: 0 0 .5em 0;
}
p.indent { 
    padding-left: 1.5em;
}
p.hangingindent {
    padding-left: 1.5em;
    text-indent: -1.5em;
}
/*no space after last para
p:last-of-type {
    margin-bottom: 0;
}*/

/*link colors*/
a:link    { text-decoration: none; color: rgb(25,25,150); }
a:visited { text-decoration: none; color: rgb(90,0,0); }
a:hover   { text-decoration: none; color: rgb(50,50,180); }
a:active  { text-decoration: none; color: rgb(50,50,180); }

/*This removes a problem in which vertical-align: baseline causes a 3px margin
  at the bottom of images. */
img {
    vertical-align: middle;
}

/*handy*/
.pull-right {
    float: right;
}
.pull-left {
    float: left;
}
.align-center {
    text-align: center;
}
.align-right {
    text-align: right;
}
.align-left {
    text-align: left;
}
.clearme {
    clear: both;
}
.nowrap {
    white-space: nowrap;
}

/*awful hack to put Comodo Trustlogo on top of footer*/
#cot_tl_fixed {
    z-index: 10;
}


/*for bordering images*/
.grayborder {
    border: 1px solid gray;
}
.darkgrayborder {
    border: 1px solid rgb(90,90,90);
}
.blackborder {
    border: 1px solid black;
}
/*-----END HOUSEKEEPING-----*/


/*-----FONTS-----*/
nav li, h3, .toplinks,.topanchors {
    font-family: "Bookman Old Style", "Georgia", serif;
    font-variant: small-caps;
}

h1, h2, h4, body, .button, #formSubmit {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-variant: normal;
}

/*default font size*/
body {
    font-size: .8125em;  /*13px*/
}

h1 {
    font-size: 1.846em; /*24px*/
    font-weight: normal;
    white-space: nowrap;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/*sans section headers*/
h2 {
    font-size: 1.3846em;  /*18px*/
    font-weight: normal;
    margin-bottom: .3em;
    white-space: nowrap;
}

/*serif headers & links*/
h3 {
    font-size: 1.3077em;  /*17px*/
    font-weight: normal;
    padding-top: .7em;
    padding-bottom: .2em;
    white-space: nowrap;
}

/*list item names*/
h4 {
    font-size: 1.154em;
    font-weight: normal;
    padding-top: .2em;
    white-space: nowrap;
}
/*-----END FONTS-----*/


/*-----MAIN CONTENT-----*/
.main {
    clear: both;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    padding: .75em 2% 4em;  /*leave room for footer*/
}

.block .main {  /*smallen wall of text*/
    max-width: 770px;
    margin: 0 auto;
}

.main img {
    margin: 0 1.5%;
}

.announcement {
    border: 2px solid rgb(255,155,100);
    padding-left: .5em;
    padding-right: .5em;
    margin-top: .5em;
   background-color: rgb(240,245,255);
}

/*bordered box*/
.ridgebox {
    border-style: ridge;
    border-width: 3px;
    border-color: rgb(220,220,255);
    padding: .6em;
}

.socialbuttons {
    width: 65px;
    padding: 0;
    margin: 0;
}


/*-----END MAIN CONTENT-----*/


/*-----HEADER-----*/
header {
    display: block;
    width: 100%;
    height: 60px;

    box-sizing: content-box;  /*sneaky trick to make navicon cover body border*/
    border-left: 1px solid rgb(200,200,200);  

    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid rgb(160,160,160);
    color: black;
/*    *zoom: 1;*/
}

/*h1 page title*/
header .pagetitle {
    float: left;
    white-space: nowrap;    
    display: inline-block;
}
header .pagetitle h1 {
    display: inline;
    line-height: 60px;
}


/*h1 list title*/
header .listtitle {
    float: right;
    padding-right: 1%;
    padding-left: 1%;
    line-height: 60px;
    color: rgb(100,100,100);
}

header .bs-logo {
    width: 150px;
    height: 60px;
    display: inline-block;
    vertical-align: top;

    background-image: url(/images/bs-quin.gif);
    background-repeat: no-repeat;
    background-position: top;
}


header .navicon {
    display: inline-block;
    float: right;
    clear: none;

    width: 80px;
    height: 100%;
}


/*images have top margin if this isn't here*/
header img {
    vertical-align: baseline;
}

/*for list item pages, style the list link at top right*/
/*must use id here why?*/
#hoo a:link, #hoo a:visited {
    color: rgb(110,110,160);
}
#hoo a:active, #hoo a:hover {
    color: rgb(90,90,175);
}

/*-----END HEADER-----*/


/*-----NAV BAR-----*/
.nav-top {
    border-bottom: 1px solid rgb(160,160,160);

}
/*-----END NAV BAR-----*/


/*-----PRODUCT PAGES-----*/

/*Flexslider wrapper*/
.product  .flexwrapper {
    text-align: center;
    clear: both;
    margin: 0 auto;
    padding-bottom: .7em;
    width: 100%;
    position: relative;
}

.flexwrapper img {
    margin: 0;
}


/*in product pages, list prev/next links are in flexslider wrapper*/
.product .listlinks {
    position: absolute;
    top: .5em;
    width: 4%;
    min-width: 25px;
    display: inline-block;
    overflow: visible;
    opacity: 0.35;
    z-index: 1;  /*on top*/
}
.product .listprev {
    left: 3%;
}
.product .listnext {
    right: 3%;
}

/*rotator icon is also in flexslider wrapper*/
.product .rotatorIcon {
    position: absolute;
    bottom: -15px;
    left: 25%;

    width: 30px;
    opacity: 0.85;
    z-index: 1;
}

/*style the rotator colorbox*/
.product #rotatorpopup {
    border: 5px solid rgb(150,150,150);
}


/*in sublist pages, list prev/next links are in body copy*/
.list .listlinks {
    width: 3.5%;
    min-width: 25px;
    display: inline-block;
    overflow: visible;
    opacity: 0.35;
}
.list .listprev {
    float: left;
    margin-right: 1em;
}
.list .listnext {
    float: right;
    margin-left: 1em;
}


/*cart stuff*/
.cartform {
    margin: 0 auto;
    width: 90%;
}
.cartform > table,.approveform > table {
    width: 100%;
    border: 1px solid gray;
}
.cartform td, .cartform th {
    padding: 6px;
}
.cartform .cartgray, .approveform .cartgray {
    background-color: rgb(240,240,240);
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}
.cartform .total {
    background-color: rgb(230,240,255);
    border-bottom: 1px solid gray;
}
.cartform #formSubmit {
    margin: 0 10px 1em;
}
.cartform .cartbutton2, .cartform .cartbutton1 {
    display: inline-block;
}
.smallbutton {
    margin-bottom: 0 !important;
    margin-right: 2%;
    font-variant: normal !important;
    font-size: 1em !important;
}

/*approvals stuff*/
.approveform {
    margin: 0 auto;
    display: inline-block;
}
.approveform td, .approveform th {
    padding: 2px;
}
.approveform #orders td, .approveform #orders th {
    border: 3px ridge rgb(200,200,200);
    padding: 5px;
}
.approveform .outofstock {
    background-color: rgb(255,230,230) !important; 
}

/*item & block copy*/
.copy {
    clear: both;
    text-align: left;
    margin: 1.4em auto .7em;
    width: 80%;
}


.indentcopy {
    clear: both;
    text-align: left;
    margin: 1.4em auto .7em;
    width: 70%;
}

.list-intro, .list-outro {
    clear: both;
    width: 80%;
    margin: 0 auto 1em;
}


/*generic responsive block: image at left, text box at right that 
shrinks to a certain size, then pops under*/
.imageblock {
    display: inline-block;  /*shrink-wrap content*/
    box-sizing: border-box;
    text-align: left;
}

/*fixed size image container*/
.imageblock .blockimage {
    float: left;
    text-align: center;
}

/*the text block*/
.imageblock .blocktext {
    box-sizing: border-box;
    overflow: auto;            /*stop text from wrapping around image*/

    text-align: left;
    padding-left: .5em;
}


/*faq list*/
#faqqlist, #faqalist {
    max-width: 770px;
    text-align: left;
}
#faqqlist .rowseparator, #faqalist .rowseparator {
        border-bottom: 0px;
}
#faqqlist {
    margin-bottom: 1.5em;
}
#faqqlist h4 {
    white-space: normal;
    padding-left: 2em;
    text-indent: -2em;
}
#faqalist .faqitem  {
    padding-bottom: .75em;
    border-bottom: 1px solid #A0A0A0;
    margin-bottom: 1em;
}
#faqalist .faqitem:last-child  {
    border-bottom: 0px;
}


/*timeline list*/
#timelinelist {
    max-width: 750px;
}
/*items are wide with left margin*/
#timelinelist .imageblock {
    width: 90%;
    padding-left: 3%;
}
/*limit image size*/
#timelinelist img  {
    max-height: 100px;
    max-width: 150px;
}
/*image container has fixed size*/
#timelinelist .blockimage {
/*    width: 150px; */
}
/*pop text under & center image*/
@media screen and (max-width: 450px) {
    #timelinelist .imageblock {
	padding-left: 0;
	width: 100%;
    }
    #timelinelist .blocktext {
	clear: both;
    }
    #timelinelist .blockimage {
	float: none;
	margin: 0 auto;
    }
}

#housewareslist .item {
    margin-bottom: 1em;
}

#downloadslist .item {
    margin-bottom: 1em;
}

#commissionslist .item {
    margin-bottom: 1em;
}

#news .news-xmas {
    margin: 0 auto;
}
#news .news-xmas td {
    padding: 5px .5em;    
}


/*buy blocks on sculpture item pages. optional image at left.  */
.buy {
    display: inline-block;
    clear: both;
    text-align: center;
    width: 100%;
    margin-bottom: 1.5em;
}

.buy .button {
    display: inline-block;
    vertical-align: top;
}

/*right-of-button span*/
.buy span {
    display: inline-block;
    text-align: left;
    margin-left: .75em;
    margin-right: .75em;
}

.buy .buydiv {
    display: inline-block;
    text-align: left;
    margin-left: .75em;
    margin-right: .75em;
    padding-top: 1em;
    max-width: 350px;
}

/*product mini, Shapeways, base blocks*/
.product .mini, .product .shapeways {
    border-top: 1px solid lightgray;
    padding-top: 1em;
}
.product .base {
    border-top: 1px solid gray;
    padding-top: 1em;
}

/*does buydiv remove need for this?*/
.product .shapeways div span {
    padding-top: 1em;
    max-width: 350px;
}

.product .mini div {
    display: inline-block;
}

.product .shapeways img, .product .mini img, .product .base img {
    vertical-align: top;
    display: inline-block;
    margin: 0px;
    max-width: 280px;
}

.product .base img {
    border-color: rgb(50,50,50);
}

.product .shapeways .button {
    width: 107px;
    height: 27px;
    padding: 0;
    background-image: url(/images/shapeways.gif);
    background-repeat: no-repeat;
    background-position: center;
}


/*this is used for glass*/
.product .popup {
    margin-left: 12px;
    width: 16px;
    height: 16px;
    background-image: url(/images/rotate-arrows.gif);
    background-repeat: no-repeat;
    background-position: center;
    opacity: .7;
}
.product .popup:hover {
    opacity: 1;
    cursor: pointer;
}


/*-----END PRODUCT PAGES-----*/


/*-----LIST PAGES-----*/
/*links at top left and right*/
.toplinks {
    clear: both;
    padding: 0 2%;
    font-size: 1.23em;  /*16px*/
}

/*anchors across the top*/
.topanchors {
    clear: both;
    padding: 0 2%;
    font-size: 1.23em;
    float: right;
    display: block;
    margin-left: auto;   /*Why does this not center this div?*/
    margin-bottom: .5em;
}

.topanchors a {
    padding-left: 1em;
    padding-right: 1em;
}

.topanchors a:before {
    content: "\25BD  ";
    font-size: 80%;
    opacity: 0.8;
}

/* lists*/
.itemlist {
    clear: both;
    margin: 0 auto;
    text-align: center;
}

/*two column lists*/
.itemlist .items {
    display: inline-block;  /*shrink-wrap contents*/
    min-width: 80%;         /*space between columns*/
}

.itemlist .items .item {
  box-sizing: border-box;
  display: inline-block;
  clear: none;
  min-width: 40%;
  padding: 0em .5em .5em .5em;
}

.itemlist .item img {
    margin: 0;
}

/*rows (two-column only)*/
.itemlist .row {
    clear: both;
    display: block;
}

/*row separator (one- and two-column)*/
.itemlist .rowseparator {
    display: block;
    margin: 0 auto .5em;
    border-bottom: 1px solid rgb(160,160,160);
    text-align: left;
}
.itemlist .rowseparator h3 { 
    padding: 0;
}

/*one-column lists*/
.itemlist .items1col {
    display: inline-block;  /*shrink-wrap contents*/
    min-width: 80%;
    max-width: 100%;        /*this makes images shrink*/
}

.itemlist .items1col .item {
  box-sizing: border-box;
  clear: both;
  padding: 0em .5em .5em .5em;
}

/*image, whether or not link*/
.itemlist .items1col .item > i, .itemlist .items1col .item > a {
    vertical-align: top;
    margin: 0px;
}

/*copy block*/
.itemlist .items1col .item > span {
    display: inline-block;
    text-align: left;
    margin-left: 0.75em;
    margin-top: .5em;
    width: 300px;
}


.itemlist .items1col .item > section {
    display: inline-block;
    text-align: left;
    margin-left: 0.75em;
    margin-top: .5em;
    width: 300px;
}


/*particular list tweaks*/
/*why is max-width: 100% not working correctly here?*/
#hardwarelist img {
    width: 100%;
    max-width: 280px;
}
#hardwarelist #hedronpull p {
    max-width: 520px;
}
#hardwarelist #hedronpullimg { 
    width: 100%;
    max-width: 525px;
}
#hardwarelist #hedronbuy {   /*organize hedron pull table*/
    display: inline-block;
    margin: 0 2%;
}

#jewelrylist .item:only-child img {
    max-width: 225px;
}
#jewelrylist .item {
    vertical-align: top;
}

.buy #jewelry {
    vertical-align: middle;  /*why doesn't this work?*/
    min-width: 200px;        /*aligns second price block*/
}

#gallerylist .item {
    max-width: 200px;
}
#gallerylist #gallerycaption {
    min-height: 3em;
}

#minilist img {
    max-width: 280px;
}
#ornamentlist img {
    width: 100%;
    max-width: 350px;
}

/*-----END LIST PAGES-----*/


/*-----FOOTER-----  3.8em tall*/
footer {
    display: block;
    position: absolute;
    bottom: 0px;
    left: -1px;  /*cover up body border*/
    right: -1px;
    
    box-sizing: border-box;

    overflow: hidden;
    text-align: center;

    background-color: rgb(180, 180, 180);
    color: black;
    height: 4em;
    line-height: 1.5;
    font-size: .846em;
    padding-top: .25em;
    white-space: nowrap;

    border-top: 1px solid rgb(100,100,100);
}

/*#must use id here why?*/
#foo a:link, #foo a:visited {
    color: rgb(35,35,35);
}
#foo a:hover, #foo a:active {
    color: rgb(25,25,75);
}

/*trick span to wrap a line when window is small*/
#foo .foot_break {
    display: inline;
}
#foo .foot_break:after {
    content: " | ";
}
/*-----END FOOTER-----*/


/*-----BUTTONS-----*/
a.button, #formSubmit {
    display: inline-block;
    font-weight: 400;
    font-size: 1.154em;  /*15px*/

    border: 1px outset #6666BB;
    border-radius: 6px;
    border-color: rgb(25,10,50);

    color: rgb(25,25,150); 
    text-decoration: none;
    margin: .6em 0;
    white-space: nowrap;
    background-color: white;

    box-shadow: 1px 1px 2px #666666;

    font-weight: normal;
    padding: .1em .35em .3em;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
    font-variant: small-caps;
}

a.button:hover, a.button:active, #formSubmit:hover, #formSubmit:active {
    border-color: rgb(50,0,150);
    color: rgb(0,0,200) !important;
}
/*-----END BUTTONS-----*/



/*-----BLACK-BACKGROUND AREAS-----*/
.black {
    background-color: black;
    color: white;
/*    border-left: 2px solid gray;
    border-right: 2px solid gray;*/
    min-height: 100%;
}

.black a:link    { color: rgb(205,205,255); }
.black a:visited { color: rgb(255,210,210); }
.black a:active  { color: rgb(180,180,255); }
.black a:hover   { color: rgb(180,180,255); }

.black .topanchors a:link  { color: rgb(210,210,255); }
.black .topanchors a:visited  { color: rgb(210,210,255); }
.black .topanchors a:active  { color: rgb(180,180,255); }
.black .topanchors a:hover   { color: rgb(180,180,255); }

.black .button {
    border-color: white;
    box-shadow: 1px 1px 2px rgb(180,180,180);
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.25);
    background-color: rgb(20,20,20);
}

.black a.button:hover, a.button:active {
    border-color: rgb(205,205,255);
    color: rgb(180,180,255) !important;
}

/*flexslider tweaks*/
.black .flexslider {
    border: 4px solid black;
    background-color: black;
}
.black .flex-control-paging li a:hover {
    background: rgb(240,240,255);
}

.black .flex-control-paging li a.flex-active {
    background: white;
}
.black .flex-control-paging li a {
    background: rgba(255,255,255,0.5);
}

/*list links*/
.black .listlinks {
    opacity: .5;
}

/*trick to replace reel icon on black pages with inverted version*/
.black .rotatorIcon img {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: url(/images/rotate_icon_black.gif) no-repeat;
    padding-left: 40px;
    width: 30px;
    height: 30px;
}
/*-----END BLACK -----*/


/*-----LINEARIZATION-----*/

/*small screen: max 36em (468px), min 320px*/
@media screen and (max-width: 36em) {
    .copy, .list-intro, .list-outro {
	width: 95%;
    }

    /*shrink bs logo*/
    header .bs-logo {
	width: 116px;
	background-image: url(/images/bs-quin-smaller.gif);
    }

    /*shrink page and list titles*/
    h1 {
	font-size: 1.5385em;  /*20px, from 25px*/
    }

    /*shrink sans section headers*/
    h2 {
	font-size: 1.231em;  /*16px, from 18px*/
    }

    /*top-of-list left/right links*/
    .toplinks {
	font-size: 1em;    /* 13px, from 16px*/
    }

    /*top-of-list anchors*/
    .topanchors { 
	font-size: 1em;    /* 13px, from 16px*/
	visibility: hidden;
	height: 0;
    }

    /*move rotator icon over*/
    .product .rotatorIcon {
	left: 5%;
    }

    footer {
	height: 4em;
	line-height: 1.25;
	font-size: .81em;
	padding-top: .1em;
    }
    
    /*wrap trick*/
    #foo .foot_break {
	display: block;
    }
    #foo .foot_break:after {
	content: "";
    }

    /*cart*/
    .cartform td, .cartform th {
	padding: 4px 2px 4px;
    /*    border: 1px dotted green;*/
    }
    .cartform .cartbuttons {
	text-align: center;
    }
    .cartform .cartbutton1 {
	display: block;
	clear: both;
	float: none;
    }
    .cartform .cartbutton2 {
	display: inline-block;
	clear: both;
	float: none;
    }
    .cartform .paychoice {
	text-align: left !important;
    }

}


/*-----END LINEARIZATION-----*/