/*------------------------------------------------------------------------------
  Ruth Allen CSS
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, 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;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline;
}

/* For IE */
img { -ms-interpolation-mode:bicubic; }

a img {
  border: none;
}

a, a:link, a:visited { text-decoration: none; color:#660000;}
a:hover, a:active { color:#ff9900; }


/*------------------------------------------------------------------------------
>>>> 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

body {
  color: #595959;
  text-shadow: rgba(255, 255, 255, .01) 0px -1px 1px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 87%;
  background:url(/static/images/bground2.jpg);
  background-position:top left;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

html>body {
  font-size:14px;
}

/* For the big happy opening paragraph */
#content h1 + p {
  font-size: 1.286em;
  line-height: 1.389em;
  margin-bottom:;
  margin-top:;
}

/* Neatening subheadings in posts  */

.post h2 { margin-top: 0px;}
.post h2 + h3 {
  margin: -0.7em 0 0.6em 0;
}

/*------------------------------------------------------------------------------
>>>> Layout
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


.container {
  width:880px;
  margin:0px auto 40px auto;
  background:#fff;
  padding:40px 40px 20px 40px;
  opacity:0.98;
}

.masthead {
  position:relative;
  width:100%;
  overflow:visible;
  height:80px;
/*  background:#ffdd00;*/
/*  border:1px solid red;*/
}

.strands {
  position:relative;
  width:100%;
  overflow:auto;
  margin:40px 0 0 0;
  height:30px;
  clear:both;
}
.home-strands {
  margin-bottom:0;
}
#content {
  width:100%;
  clear:both;
  margin:40px 0 20px 0;
  padding:0 0 40px 0;
  overflow:hidden;
}

.text {
  width:554px;
}

.footer {
  clear:both;
  font-size: 90%;
  margin:20px 0 0 0;
  overflow:auto;
  border-top:1px solid #ccc;
}
.byline {
  padding-top: 0.5em;
  font-size: 90%;
  text-align: center;
}

.byline a {
  color:#666;
}
.byline a:hover {
  border-bottom:1px solid #ccc;
}

/*------------------------------------------------------------------------------
>>>> Masthead & tabs
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

h1.sitetitle, #prj h1.sitetitle {
  color:#666;
  width:520px;
  position:relative;
  float:left;
  display:inline;
  font-size:36px;
  text-transform:uppercase;
  font-weight:normal;
  border:0;
  margin:0;
  height:81px;
  overflow:hidden;
}

h1.sitetitle span {
  display:none;
  font-size:22px;
}

h1.sitetitle a {
  color:#666;
  display:block;
  background:url(/static/images/ruthallen.png) left top no-repeat;
  width:299px;
  height:81px;
/*  border-top:1px solid #ccc;*/
/*  border-bottom:1px solid #ccc;*/
}
/* Plain text-link style nav */

ul.textNav {
  position:relative;
  float:right;
  display: inline;
  width:110px;
  padding:0;
  margin:0;
  list-style: none;
  border-top:1px solid #ccc;
  font-size:0.929em;
  overflow:hidden;
  x-index:0;
}
ul.textNav li {
  display: block;
  float:right;
  line-height: 1.462em;
  text-align:right;
  text-transform:lowercase;
  margin:0;
  padding:0;
  width:100%;
}

ul.textNav li a {
  display:block;
  color:#666;
  width:110px;
  border-bottom:1px solid #ccc;
}

ul.textNav li a:hover {
  background:#ccc;
}

.strands {
  position:relative;
  width:100%;
  overflow:hidden;
}

.strands ul {
  list-style:none;
  margin:0;
  padding:0;
}
.strands ul li {
  float:left;
  margin:0;
  padding:0;  
}
.strands ul li a {
  display:block;
  float:left;
  width:430px;
  height:20px;
  margin:0;
  padding:4px 0 0 0;
  background-color:#ccc;
  color:#666;
  text-transform:uppercase;
  text-align:center;
  font-size:18px;
  letter-spacing:0.1em;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  font-family: freight-sans-pro, "Gill Sans", Helvetica, Arial, sans-serif;
/*  font-family:futura-pt;*/
  font-weight:400;
}

.strands li a:hover {
  color:#fff;
}
.strands li#art {
  margin-right:20px;
}
.strands li#art a:hover, 
.strands li#art a.active,
.strands li#art a:active {
/*  background:#532763;*/
/*  background:#5E6E66;*/
  background-color:#660000;
  color:#fff;
}
.strands li#ccd a:hover, 
.strands li#ccd a.active,
.strands li#ccd a:active {
/*  background:#EE3524;*/
/*  background:#CA6A4F;*/
/*  background:#FF0000;*/
/*  background:#F68D3D;*/
  background-color:#ff9900;
  color:#fff;
}


/*------------------------------------------------------------------------------
>>>> Basic Typography
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

em, i {
  font-style:italic;
}
b, strong {
  font-weight: bold;
}

h1 {
  font-size:2.57em;
  line-height:1.13;
  margin: 0 0 0.56em 0;
  letter-spacing:0.05em;
  text-transform:uppercase;
/*  font-family:"Gill Sans MT", "Gill Sans", Helvetica, Arial, sans-serif;*/
  font-family: freight-sans-pro, "Gill Sans", Helvetica, Arial, sans-serif;
}
h2 {
  font-size: 1.714em;
  line-height:1.25em;
  margin-top: 1.25em;
  margin-bottom: 0.4167em;
}
h3 {
  font-size: 1.429em;
  line-height: 1em;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}
h4 {
  font-size:1.1em;
  line-height:1.111em;
  font-weight:bold;
  margin-top:2em;
  margin-bottom:0.225em;
}
h5, h6 {
  font-size:1.143em;
  line-height:1.25em;
  margin-top:2em;
  margin-bottom:0.5em;
  font-weight:bold;
}
p {
  line-height:1.429em;
  margin-bottom:1.429em;
  margin-top:1.429em;
}
ul, ol {
  padding: 0 0 0 25px;
  margin:1.0em 3.0em 1.4em 0;
  margin:0;
  font-size:0.923em;
}
ul ul, ol ol {
  margin-left: 1.8em;
}
li {
  line-height:1.2em;
  margin-bottom:0.39em;
}
dl {
  line-height: 130%;
}
dt {
  font-weight: bold;
  margin-bottom: 0;
}
dd {
  margin-bottom: 2.0em;
}
blockquote {
  margin: 1.539em 0 1.539em 1em;
  font-size:0.923em;
  line-height:1.539em;
  padding: 0 1.539em;
  border-left: 1px solid #ccc;
  color:#777;
}
blockquote p {
  padding:0;
  margin:0 0 1.0em 0;
}
blockquote cite {
  font-style:italic;
  font-weight: bold;
  font-size:0.9em;
}
table {
  border-collapse: collapse;
  margin: 1.0em 0;
  padding: 0;
  font-size: 0.9em;
  width: 100%;
}
table td {
  text-align: left;
  vertical-align: top;
  padding: 0.3em 1.0em 0.3em 0;
  border-bottom:1px solid #ddd;
}
table th {
  padding: 0.3em 1.0em 0.3em 0;
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid #222;
}
table p {
  margin: 0.5em 0;
}

/*------------------------------------------------------------------------------
>>>> Generally helpful
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.error, .preview {
  border: 1px dashed red;
  padding: 1.0em 1.0em 0 1.0em;
}

.skip { /* For hidden skip-to-content link */
  display: none;
}

.go { /* Link to post or extended article */
  text-align: right;
}
.first { /* For the first item in series */
  margin-left: 0;
  padding-left: 0;
}
.last { /* For the last item in series */
  margin-right: 0;
  padding-right: 0;
}
.notFound {
  width:100%;
  height:160px;
  background:#ccc;
}

#blg div.post,
#evt div.post,
#nws div.post {
  margin-bottom:2.0em;
  width:554px;
  border-bottom:1px solid #ccc;
}

/*------------------------------------------------------------------------------
>>>> Blog and News (BLG, NWS) pagination 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#nws div.pagination {
  margin-top:4.0em;
  font-size: 90%;
}
#nws .pagination h4 {
/*  border:1px solid red;*/
  position:relative;
  float:right;
  display:block;
  width:100px;
  height:30px;
  margin:0;
  padding:0;
  font-size:13px;
}
#nws .pagination ul {
  margin: 0;
  float: right;
  list-style: none;
  padding:0;
  clear:both;
}
#nws .pagination ul li {
  border-right: 1px solid #444;
  padding: 0 0.4em;
  margin-top: 0.5em;
  float: left;
/*  text-align:right;*/
}
#nws .pagination ul li.currentPage {
  font-weight: bold;
}
#nws .pagination ul li.nextPage {
  border-right: 0;
  padding-right: 0;
}

#nws h4.archive {
  border-top:1px solid #ccc;
  clear:both;
  float:right;
  text-align:right;
  padding-top:5px;
}

/*  >> Comments <<   */

#blg p.commentInfo,
#tlk p.commentInfo { /* Shows if comments are on or off, and how many */
  margin-top: 2.0em;
  text-align: right;
  font-size: 90%;
  font-weight: bold;
}
#blg div.cmt,
#tlk div.cmt {
  margin-bottom: 2.4em;
  font-size: 90%;
}
div.preview h4.commenter {
  margin-top: 0;
}
#blg div.preview a.hide,
#tlk div.preview a.hide {
  color: red;
}

/*------------------------------------------------------------------------------
>>>>  Home page
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.home {
  width:430px;
  position:relative;
  float:left;
  display:inline;
  margin:0 0 0;
  padding:0;
  background-position:left top;
  background-repeat:repeat-y;
}

.artworks {
  margin-right:20px;
}

.home a h3 {
  font-size:16px;
  background:#fff;
  opacity:0.85;
  filter:alpha(opacity=85);
  position:relative;
  float:right;
  margin:0;
  width:180px;
  height:4em;
  padding:10px;
  line-height:1.5em;
  -webkit-border-top-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  display:none;
}

.home a:hover h3,
.home a:active h3 {
  margin:-200px 0 0 0;
  display:block;
}
.home a {
  color:#666;
}

.home a h3.curved-right {
  -webkit-border-top-left-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-bottomleft: 0px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  width:180px;
  float:left;
  font-size:16px;
  background:#fff;
  opacity:0.85;
  filter:alpha(opacity=85);
  position:relative;
  height:4em;
  padding:10px;
  line-height:1.5em;
  margin:0;
}
.home a:hover h3.curved-right,
.home a:active h3.curved-right {
  margin:-200px 0 0 0;
  float:left;
}

.strands li#art-home a {
/*  background:#532763;*/
/*  background:#5E6E66;*/
  background-color:#660000;
  color:#fff;
  margin-right:20px;
}
.strands li#ccd-home a {
/*  background:#EE3524;*/
/*  background:#CA6A4F;*/
/*  background:#FF0000;*/
/*  background:#F68D3D;*/
  background-color:#ff9900;
  color:#fff;
}

.homeFooter {
  margin:0;
  font-size: 90%;
}
.homeFooter .byline {
  margin:0;  
  padding:0;
}

/*------------------------------------------------------------------------------
>>>>  Projects (PRJ) This is where the bulk of the site comes in -
      artworks and CCD projects
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* Artworks */
.post {
  clear:left;
  overflow:hidden;
  margin:0 0 60px 0;
}
.project-tag {
  margin:0 0 20px 0;
  padding:0;
  overflow:hidden;
  clear:left;
}

.project-tag h1 {
  margin-bottom:20px;
}

a.moreTag {
  position:relative;
  display:block;
  float:right;
  width:165px;
  text-transform:lowercase;
  font-size:0.929em;
  color:#808080;
  background:#e6e6e6;
  text-align:center;
  padding:4px 0;
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  margin-top:8px;
}
a:hover.moreTag {
  background:#660000;
  color:#fff;
}

.project-tag .artwork, .artwork {
  width:205px;
  float:left;
  display:inline;
  margin:0 20px 20px 0;
  padding:0;
  overflow:hidden;
}

.project-tag .last, .last {
  margin:0;
}

.project-tag .artwork a:hover img, .artwork a:hover img {
  opacity:0.75;
  filter:alpha(opacity=75);
}
.project-tag .artwork span, .artwork span {
  display:block;
  margin:3px 0 0 0;
/*  line-height:20px;*/
  line-height:1.3;
  font-family: freight-sans-pro, "Gill Sans", Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size:1.1em;
  overflow:hidden;
/*  border:1px solid green;*/
}
.project-tag .artwork a, .artwork a {
  color:#4d4d4d;
}
.project-tag .post a img {
  border:3px solid #c9cba3;    
}
.project-tag .post a:hover img {
  border:3px solid #e94f2a;

}

/* CCD projects */
.post h1, #prj h1 {
  border-bottom:2px solid #777;
  padding-bottom:8px;
/*  font-family:"Gill Sans MT", "Gill Sans";*/
  font-family: freight-sans-pro, "Gill Sans", Helvetica, Arial, sans-serif;
  font-size:30px;
  margin-bottom:20px;
}
h1 a, .post h1 a {
  color:#666;
}

div.header {
  overflow:hidden;
  position:relative;
  width:100%;
  border-bottom:2px solid #777;
  margin-bottom:20px;
}
#prj div.header h1, div.header h1 {
  border-bottom:none;
  width:80%;
  float:left;
  display:inline;
  margin-bottom:0;
  padding-bottom:8px;
/*  font-family:"Gill Sans MT", "Gill Sans";*/
  font-family: freight-sans-pro, "Gill Sans", Helvetica, Arial, sans-serif;
  font-size:30px;
}

img.prj {
  float:left;
  display:inline;
  margin-right:20px;
}

.description {
  position:relative;
  float:left;
  display:inline;
  width:430px;
  margin:0 0 20px 0;
}

.single {
  width:420px;
}

.description p {
  margin-top:0;
}
a.more {
  display:block;
  width:180px;
  text-transform:uppercase;
  color:#666;
  background:#ccc;
  text-align:center;
  letter-spacing: 0.15em;
  padding:4px 0;
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
}
a:hover.more {
  background:#ff9900;
  color:#fff;
}

a.back {
  position:relative;
  display:block;
  float:right;
  width:140px;
  text-transform:lowercase;
  font-size:0.929em;
  color:#808080;
  background:#e6e6e6;
  text-align:center;
  padding:4px 0;
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  margin-top:8px;
}

a:hover.back {
  background:#ff9900;
  color:#fff;
}
a:hover.artpage { /* the back button for artwork page */
  background:#660000;
}

/*------------------------------------------------------------------------------
>>>> Links (LNK)
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

div.link {
  width:180px;
  float:left;
  display:inline;
  margin:0 10px 10px 0;
  padding:5px 0;
  border-bottom:1px solid #ccc;
  clear:left;
}
.link img {
  border:3px solid #ccc;
  float:left;
  display:inline;
  margin:0 5px 0 0;
}


/*------------------------------------------------------------------------------
>>>> Slideshow (for the CCD section)
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#slideshow, #shpSlideshow {
  width:426px;
  position:relative;
  float:left;
  display:inline;
  margin:0;
  padding:0 34px 0 0;
  overflow:visible;
/*  border:1px solid red;*/
}
#shpSlideshow {padding-right:20px;}
#slideshow div.placeholder {
  width: 420px;
  overflow: hidden;
  background: url(/static/images/spinner.gif) center center no-repeat;
}

#slideshow div.placeholder img,
#shpSlideshow div.placeholder img {
  width:420px;
}
#slideshow #SS_caption, #gallery #SS_caption {
  margin-top: 20px;
  font-size: 90%;
  border:2px solid #ccc;
  height: 45px;
  padding:10px;
  overflow:hidden;
  width:396px;
}

#slideshow ol, #gallery ol, #shpSlideshow ol {
  position:relative;
  margin:20px 0 0 0;
  padding:0;
  list-style:none;
}
#slideshow ol li, #gallery ol li, #shpSlideshow ol li {
  position:relative;
  display: block;
  padding: 0;
  float: left;
  cursor: pointer;
  font-size: 90%;
  border:3px solid #ccc;  
  width:73px;
  height:73px;
  margin:0 6px 6px 0;
  line-height:0;
}
#slideshow ol li a, #gallery ol li a, #shpSlideshow ol li a  {
  padding: 0;
  margin:0;
  width:73px;
  height:73px;
  border:3px solid #ccc;
}
#slideshow ol li#activeThumb,
#gallery ol li#activeThumb { /* The active marker for the slideshow */
  border:3px solid #ff9900;
}

/*------------------------------------------------------------------------------
>>>> Gallery (the second slideshow ingredient for artwork section)
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#gallery {
  width:100%;
  position:relative;
  margin:0;
}
#gallery div.placeholder, #shpSlideshow div.placeholder {
  width: 100%;
  overflow: hidden;
}

#shpSlideshow div.placeholder img {width:100%;}

#gallery ol {
  width:100%;
  display:block;
  margin-bottom:-8px;
  overflow:hidden;
  list-style:none;
}

#gallery ol li, #shpSlideshow ol li {
  width:64px;
  height:64px;
}
#gallery ol li a, #shpSlideshow ol li a {
  width:64px;
  height:64px;
}
#gallery ol li#activeThumb {
  border:3px solid #660000;  
}

#shpSlideshow ol li#activeThumb {
  border:3px solid #5E8EBD;
}



/*-----------------------------------------------------
                     >> Images <<

Sizes
large: 430px
medium: 280px
small: 140px

-----------------------------------------------------*/

.captioned {
  margin-top: 0.7em;
  margin-bottom: 0.7em;
}
.captioned blockquote {
  background:none;
  margin: 6px 0 0 0;
  padding: 0;
  border: 0;
}
.captioned blockquote p {
  font-size: 0.85em;
  font-style: normal;
  line-height: 140%;
}
img.small, .smallCaptioned {
  float: left;
  width: 140px;
  margin: 0 18px 10px 0;
}
img.med, .medCaptioned {
  float: left;
  width: 280px;
  margin: 0 18px 10px 0;
}
img.med_right, .med_rightCaptioned {
  float: right;
  width: 280px;
  position: relative;
}
img.large, .largeCaptioned {
  width: 430px;
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
  background:#fff;
}
.largeCaptioned {
  margin: 1.7em 0;
  border: none;
  padding: 0;
}

.medCaptioned img,
.med_rightCaptioned img,
.smallCaptioned img,
.small_rightCaptioned img,
.largeCaptioned img {
  float: none;
  margin: 0;
}

p.submit {
  text-align:center;
  margin-top:10px;
  width:100%;
  overflow:hidden;
}

.submit input {
  font-size:16px;
}


/*------------------------------------------------------------------------------
>>>> Shop
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#shp #content a, #shp #content a:link, #shp #content a:visited {     
  text-decoration: none; 
  color:#5E8EBD;
}
#shp #content a:hover, #shp #content a:active { color:#188BEA; }

a.shop_link {
  display:block;
  background:#189ae4;
  background:#ccc;
  padding:2px 0;
  text-transform:uppercase;
  color:#666;
  text-align:center;
  border-radius:2px;
  font-size:18px;
  letter-spacing:0.1em;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  font-family: freight-sans-pro, "Gill Sans", Helvetica, Arial, sans-serif;
  height:20px;
  line-height:20px;
}
a:hover.shop_link,
a.shop_active {
  background:#5E8EBD;
  color:#fff;
}


#shp .description {padding-right:10px;width:420px;}

#shp .description a.more {width:300px;letter-spacing:0}

#shp #content .description h1 + p {
  font-size: 1em;
  line-height: 1.389em;
  margin-bottom:;
  margin-top:;
}

/* mix pack promo box */
.mixPack {
  position:relative;
  float:left;
  width:396px;
  padding:15px 15px;
  border:2px solid #ddd;
  margin-left:20px;
  border-radius:4px;
}
.mixPack h2 {
  font-family: freight-sans-pro, "Gill Sans", Helvetica, Arial, sans-serif;
  text-transform:uppercase;
  font-weight:400;
  font-size:2em;
  margin-top:0;
  text-align:center;
}
.mixPack a.imgLink {
  display:block;
  position:relative;
  margin:0 auto 10px auto;
  align:center;
  width:306px;
  clear:both;
}

.mixPack a.imgLink {}
.mixPack p {margin:0;text-align:center;font-size:1.3em;}

/* product page */

div.shpHeader {
  overflow:hidden;
  position:relative;
  width:100%;
  margin-bottom:20px;
}
div.shpHeader h1 {
  position:relative;
  border-bottom:none;
  width:711px;
  margin-right:0;
  display:inline-block;
  vertical-align:bottom;
  margin-bottom:0;
  padding-bottom:8px;
  font-family: freight-sans-pro, "Gill Sans", Helvetica, Arial, sans-serif;
  line-height:1em;
  border-bottom:1px solid #777;
}


.purchaseOptions {
    position:relative;
  width:165px;
  overflow:hidden;
  display:inline-block;
  vertical-align:bottom;
  position:relative;
  height:40px;
}
.var .purchaseOptions {
  height:70px;
}
#shp #content .purchaseOptions a, a.mixLink {
  display:block;
  position:absolute;
  bottom:0;
  right:0;
  width:163px;
  font-size:0.929em;
  color:#595959;
  color:#5E8EBD;
  background:#eee;
  border:1px solid #ccc;
  text-align:center;
  padding:8px 0;
  margin:0;
}
#shp #content .purchaseOptions a:hover {
  background:#5E8EBD;
  color:#fff;
}

.variations {
  overflow:hidden;
}
#shp #content .purchaseOptions .variations a {
  position:relative;
  float:right;
  clear:both;
  margin:2px 0 0 0;
  right:0;
}

.snippets { /* 'other products in this category' */
  margin:60px 0 0 0;
  position:relative;
  clear:both;
}

a.mixLink {
  position:relative;
  margin-top:10px;
  margin:10px auto 5px auto;
}
#shp #content a.mixLink:hover {
  background:#5E8EBD;
  color:#fff;
}

#shp #content a.more:hover {
  background:#5E8EBD;
  color:#fff;
}

#shp p.facebook {margin-top:30px;}

#shp p.facebook a {
  display:block;
  color:#fff;
  background:url(/static/images/facebook.png) center center no-repeat;
  width:150px;
  height:45px;
  margin:6px 0 0 0;
}
#shp p.facebook a span {display:none;}

/*------------------------------------------------------------------------------

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


.shopFoo div {overflow:auto;position:relative;display:block;}

#shp #content .artwork a {color:#4d4d4d;}

#shp .productImage {
  float:left;
  position:relative;
  width:430px;
  padding-right:20px;
/*  width: 100%;*/
}

#shp .comparison { /* If regular price > current price */
  text-decoration: line-through;
}
#shp .sale {color:#ff0000;font-weight:bold;}

#shp .available { /* Date available - used especially for upcoming products */
  font-style: italic;
}

#shp .productSlideshow img {
/*  width: 100%;*/
/*  margin-bottom:10px;*/
}

div.variations a {
  display:block;
  margin:0 0 0.5em 0;
}
#shp .post .purchaseOptions { /* Make it smaller on the index page */
  font-size: 0.85em;
  border: 0;
}
#shp .purchaseOptions p {
 margin-bottom: 0;
}

/* The basket-filler provided by add_to_cart_link */
a.basket_filler {  }
a.basket_fillerAdd { }        /* 'Add to cart */
a.basket_fillerProcessing { } /* 'Adding...' */
a.basket_fillerCheckout { }   /* 'Go to checkout' */


/* drop-down basket positioning */
.top {
  position: relative;
  width:960px;
  margin:0 auto;
  height:40px;
  z-index:4000000;
}

.basketContainer {
  position: relative;
  width:300px;
  float:right;
}

/* The rest of the basket styles are in basket.css */

/* Freight table */
table.shpFreightTable {
}
table.shpFreightTable th {
  font-weight:bold;
  padding-left: 0;
  border-bottom: 1px solid #ddd;
}
p.shpTaxInfo {
  font-size: 0.9em;
}


/* Checkout (general) */
.checkout {
  position:relative;
  float:left;
  width:560px;
  padding-right:80px;
}

.policies {
  position:relative;
  float:left;
  width:240px;
}
.policies h4 {font-size:1.1em;margin-top:0;}

#shp .checkoutActions {
  margin-top: 1.5em;
  font-size: 1.1em;
}
#shp .previous {
  float: left;
}
#shp .next {
  float: right;
}

span.notes {
  color:#600;
  padding-top:5px;
  width:60%;
  display:block;
  font-size:87%;
}

table.shopForm {
  position:relative;
  clear:both;
  margin:10px 0;
/*  width:584px;*/
  width:560px;
  border-bottom:3px solid #aaa;
}
table.shopForm th {
  background:#aaa;
  color:#fff;
  font-size:14px;
  font-weight:bold;
  padding:6px 0;
  border-bottom:none;
}
table.shopForm td {
  background:#eee;
  color:#333;
  font-weight:bold;
  padding:12px 0;
}
table.shopForm th.image,
table.shopForm td.image {
  width:84px;
  text-align:center;
}

table.shopForm th.title,
table.shopForm td.title {
  width:201px;
  padding-left:14px;
}
table.shopForm td.title span {
  font-weight:normal;
  display:block;
}
table.shopForm th.price,
table.shopForm td.price {
  width:61px;
  padding-right:10px;
  text-align:right;
}
table.shopForm td.price {
  font-weight:normal;
}  

table.shopForm th.quantity,
table.shopForm td.quantity {
  width:70px;
  text-align:right;
}
table.shopForm th.remove,
table.shopForm td.remove,
table.shopForm th.state,
table.shopForm td.state {
  width:110px;
  text-align:right;
  padding-right:10px;
}


table.shopForm tr.summaryTotal td {
  background:#fff;
}
table.shopForm tr.summaryTotal td.price,
table.shopForm tr.summaryTotal td.quantity {
  font-weight: bold;
  font-size:18px;
  text-align:right;
}
table.shopForm tr.summaryTotal td.quantity {
  padding-right:10px;
  width:60px;
}
table.shopForm tr.summaryTotal td.price span,
table.shopForm tr.summaryTotal td.quantity span {
  font-size:11px;
  color:#333;
  font-weight:normal;
  margin:0 0 10px 0;
  display:block;
  text-transform:uppercase;
}
table.shopForm tr.total td {
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: bold;
}

table.shopForm tr.summary td {
  background:#fff;
}
table.shopForm tr.border td {
  border-top:3px solid #aaa;
}
table.shopForm tr.total td.title,
table.shopForm tr.total td.price {
  font-size:16px;
}


/* #basketTable - view basket page (inheriting from .shopForm)*/

/* remove and update buttons */
#basketTable td.remove label {
  position:relative;
  border:1px solid #aaa;
  display:block;
  background:#aaa;
  color:#fff;
  cursor:pointer;
  padding:3px 2px;
  text-transform:uppercase;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  behavior: url(/static/styles/PIE.htc);
  width:92px;
  text-align:center;
  font-size:10px;
  float:right;
}
#basketTable td.remove input {
  float:left;
}
#basketTable a.remove {
  background-color:#aaa;
  width:55px;
  height:25px;
  color:#ffffff;
  display:block;
  text-align:center;
  padding:5px 0;
  opacity:0.85;
  -moz-opacity: 0.85;
  filter:alpha(opacity=85);
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
}

#basketTable tr.refresh td {
  border-top:3px solid #aaa;
  background:#fff;
}
#basketTable input.update { /* the 'update totals' button */
  border:2px solid #aaa;
  position:relative;
  background:#aaa;
  color:#fff;
  padding:0.6em 10px;
  width:255px;
  margin-left:44px;
  font-family:Helvetica, Arial, sans-serif;
  font-size:14px;
  text-transform:uppercase;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  cursor:pointer;
  opacity:1;
  -moz-opacity: 1;
  filter:alpha(opacity=100);
}
#basketTable input:hover.update {
  opacity:0.95;
  -moz-opacity: 0.95;
  filter:alpha(opacity=95);
}


/* Step 1 */
#shp input.update { /* Update quantities button */
  font-size: 1.0em;
}

/* Step 2 */
#shp p.toggle { /* Toggles for billing/shipping address and remember details */
  font-size: 0.9em;
  margin: 1.5em 0;
  padding: 0.3em 0;
  line-height: 160%;
}
#shp #content p.toggle a {
  color: #999;
}
#shp #content p.toggle a.toggleOn {color: #600;font-weight:bold;}

#shp .uniForm .ctrlHolder {border-bottom:none;}

/* Step 3: Paypal */


/* order status */

div.correspondence dl {
  padding-left:0;
  margin-top:1em;
}
div.correspondence dl dt {
  width:300px;
  margin-bottom:0.3em;
  margin-top:0.3em;
}
div.correspondence dl dd {
  border:1px dashed #bbb;
  width:300px;
  padding:10px 10px 0 10px;  
  margin-bottom:1em;
}
div.correspondence dl dd p {
  margin:0 0 1em 0;
}
form#correspondence {margin-top:0;}
form#correspondence fieldset {padding:0;}
#correspondence textarea {
  border:1px solid #bbb;
  border-radius:2px;
  width:240px;
}

/*------------------------------------------------------------------------------
>>>> Mime-type display - the default behaviour when a file is inserted in text
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

a.download {
  display:block;
  overflow:hidden;
  border:1px solid #ccc;
  margin:0;
  padding:0;
  background:#eee;
  position:relative;
  text-decoration:none;
}
a.download:hover {
  background:#E6F1FF;
}
a.download label {
  margin:20px 0 0 0;
  padding:0;
  display:block;
  line-height:140%;
  float:left;
}
a.download label span {
  font-weight:bold;
  font-size:12px;
}
a.download img {
  float:left;
  margin:0;
  padding:3px 0;
  width:64px;
  height:64px
}


/*------------------------------------------------------------------------------
>>>> Uniform overwrites (remove the .uniForm class from forms to disregard)
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* This is the main unit that contains our form elements */
.uniForm {
/*  border:1px solid red;*/
  width:100%;
}
#ctt .uniForm {width:430px;}
.uniForm .ctrlHolder { padding: 0;}
.uniForm .buttonHolder { padding-top: 10px; }

.uniForm .inlineLabels label,
.uniForm .inlineLabels .label {
  width: 40%;
}
#shp .uniForm .inlineLabels label {color:#666;}
.uniForm .inlineLabels .textInput,
.uniForm .inlineLabels .fileUpload {
  width: 54%;
}

.uniForm .inlineLabels input {
  width: 55%;
}
#shp .uniForm .inlineLabels input[type="text"] {
  border:1px solid #bbb;
  border-radius:2px;
  padding:6px 4px;
  font-family: Helvetica, Arial, sans-serif;
  font-size:14px;
  color:#333;
}
#shp .uniForm .inlineLabels input #basket_billing_state {
  margin-right:4px;
}

#shp .uniForm .inlineLabels .multiField .blockLabel input[type="text"] {padding:6px 2px;}

/*.uniForm .inlineLabels .multiField .blockLabel .textInput#basket_billing_state {margin-right:4px;}*/
.uniForm .inlineLabels .selectInput,
.uniForm .inlineLabels select{ width: 54%;  }

.uniForm .inlineLabels textarea{  width: 56%; font-family: Helvetica, Arial, sans-serif; }

.uniForm .inlineLabels .formHint {
  margin-top: 0;
  margin-left: 42%;
  font-size: .9em;
  color: #777;
  position: static;
}
.uniForm .inlineLabels .multiField {
  width: 54%;
  margin: 0 0 .3em 0;
}

.uniForm label.blockLabel { font-size: 90%; }
.uniForm .inlineLabels .blockLabel {
  width: 45%;
  margin-right: 5%;
}

.uniForm .inlineLabels .address .textInput {
  width: 100%;
}
.uniForm .inlineLabels .address label {
  display: none;
}
.uniForm .ctrlHolder {
  padding: 6px 0;
  border-bottom: 1px solid #ccc;
}
.uniForm .noBorder {
  border: 0;
}
.uniForm .inlineLabels p.formHint {
  font-size: 80%;
  padding-top: 0.8em;
  line-height: 130%;
}