/*

Colors
------
Black: #231F20
Blue: #617C7E
Grey: #3A4243
Dark Grey: #333839
Pink: #F95786

*/

/* -------------------------------------------------------------
   General
---------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-family: "Droid Serif", "Georgia", "Times New Roman", serif;
  color:#444;
}
h1 {
  font-size:2em; line-height:1; margin-bottom:0.75em;
}
h2 {
  font-size:1.5em; line-height:1; margin-bottom:1em;
}
p.large {
  font-size:1.5em; line-height:1.25;
}
p img {
  margin-top:0;
}
img {
  vertical-align:middle;
}
a {
 color:#617C7E;
 text-decoration:none;
}
a:hover {
    color:#F95786;
}

/* -------------------------------------------------------------
   Layout 
---------------------------------------------------------------*/
body {
  background:#3A4243;
  padding:10px 0;margin:0;
}

div.container {
  margin: 0 10px;
}

div.top {
    width:742px;
    margin-bottom:18px;
}

div.content {
  background:#fff;
  border:6px solid #617C7E; 
  padding:10px;
  min-height:420px;
}

div.footer {
  margin-top:9px;
  color:#fff;
}

p.logo {
  margin:0;padding:0;
}

p.logo a {
  font-size:2.5em;
  line-height:1;
  color:#fff;
  font-weight:bold;
  background: transparent url(/media/images/logos/web_logo.png) 0 0 no-repeat;
  width:270px;
  height:82px;
  display:block;
  text-indent:-5000px;
  overflow:hidden;
  padding:0;margin:0;
}

p.logo a:hover {
  background-position:0px -100px;
  color:#F95786;
}
/* -------------------------------------------------------------
  Menus
---------------------------------------------------------------*/
ul.menu li {
  list-style-type:none;
  padding:0; margin:0;
}

ul.menu a {
  text-decoration:none;
  font-family: "Droid Serif", "Georgia", "Times New Roman", serif;
  font-weight: bold; font-size:1.2em;  
  line-height:1.25; margin-bottom:1.25em; 
    
}
ul.menu li.selected a,
ul.menu li a:hover {
  color: #F95786 !important;
}

div.top ul.menu {
  list-style-type:none;
  padding:0; margin:18px 0 0 0;
}

div.top ul.menu a {
  color: #fff;
}

.content ul.menu {
  list-style-type:none;
  padding:0;margin:0 0 18px 0;
}

.content ul.menu li {
  float:left;
}

.content ul.menu li.first {
  margin-left:0;
}

.content ul.menu li a {
  margin:0 0 0 6px; padding:0 0 0 10px;
  line-height:2.2;
  background:#fff url(/media/images/decor/forward_slash.png) left center no-repeat;
}

.content ul.menu li.first a {
    background-image:none;
    margin-left:0;
}

/* -------------------------------------------------------------
   Product collection
---------------------------------------------------------------*/

.product-collection .piece {
  float:left; 
  margin-right:30px;
}
.product-collection .piece a {
    display:block;
}
.product-collection .piece  img {
  float:none;
  margin:0; 
  padding:0;
}

.price,
.detail-link {
  text-decoration:none;
  font-family: "Droid Serif", "Georgia", "Times New Roman", serif;
  font-size:1.2em; font-weight: bold; 
  line-height:1.25; margin-bottom:1.25em;
}

.piece p.img {
    height:306px;
    overflow:hidden;
}

.price.sold {
    color:#ff0000;
}
/* -------------------------------------------------------------------------- 

Horizontal scrolling window 

For this to work the inner div (scroll-inner, the one that actually scrolls) needs to
be wide enough to fit everything in. If what's going in is unknown, then this has 
to be set to a very large value.

As an alternative it could be fixed to the correct size with javascript.

*/
.scroll-outer {
  overflow:auto;
  overflow-y:hidden;
}

.scroll-inner {
  width:30000px;
}
/* -------------------------------------------------------------
   General pages
---------------------------------------------------------------*/
.page-img {
    float:right;
    margin-left:30px;
}
body.page-about .content,
body.page-contact .content {
    width:710px;
}
/* -------------------------------------------------------------
   Home page 
---------------------------------------------------------------*/
.permalink-images, .permalink-text {
    float:left;
}
/*
 * Image container needs to have a fix height so page doesn't jump around
 * when scrolling through images of different sizes
 */
.permalink-images {
    width:430px;
    height:550px;
    overflow:hidden;
    text-align:center;
}
.permalink-text {
    width:400px;
    margin-left:30px;
}
.permalink-text ul.thumbs {
    list-style-type:none;
    padding:0; margin:0;
}
.permalink-text ul.thumbs li {
    float:left;
    margin:0 10px 10px 0;
    padding:0;
}
/* -------------------------------------------------------------
   Home page 
---------------------------------------------------------------*/
body.home .content {
    width:710px;
}
body.home .piece {
  width:230px;
  margin-bottom:18px;
  overflow:hidden;
}