/* 
   cpt-city theme
   
   derived from Helmar Wieland's floating theme
   $Id: cpt-city.css,v 1.52 2012/08/08 18:54:51 jjg Exp $
*/

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600");

/* base page style */

body { 
    color: #000000;
    background: rgb(204,204,204);
    font-family: "Open Sans", Helvetica, Arial, Geneva, sans-serif;
    font-weight: normal;
    font-size: 100%;
    margin: 0px;
    padding: 0px;
}

a:link {
  color: #B85761;
  text-decoration: none;
}

/* 
   for links to the gradients where the gradient
   probaly wont work (too big etc), the same as 
   background grey (above) but this is in the (white)
   image box
*/

a.badgradient:link { 
  color: #cccccc;
  text-decoration: none;
}

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

a:visited {
  color: #B85761;
  text-decoration: none;
}

/* the header of all pages */

h1 { 
  color: #203643;
  font-weight: bold;
  text-shadow: 2px 2px 5px #777;
  letter-spacing: 5pt;
  font-size: 135%;
  text-align: right;
  margin: 20px 4% 35px 0;     
} 

div.translate { 
  float: left;
  margin: 0px 0% 15px 1.7%; 
 }

/* the navigation menu (parent folders) */ 

ul.menu {
    background: #CCE76E;
    border-top: solid 1px #404822;
    border-bottom: solid 1px #404822;
    font-weight: bold;
    letter-spacing: 1pt;
    margin: 0px;
    padding: 3px 0px 3px 4%;
    color: #404822;
    clear: left;
}

ul.menu li {
  display: inline;
  color: #404822;
}

ul.menu li a {
  color: #404822;
}

ul.menu li.up {
  position: absolute;
  right: 4%;
}

/* the page's content */

div.content { margin: 3% 4% 3% 4%; } 

h2 { 
  font-weight: bold;
  font-size: 100%;
  line-height: 130%;
  color: #203643;
  padding: 0;
}

p {
  font-size: 100%;
  line-height: 130%;
  color: #203643;
  padding: 2px;
}

pre {  
  font-weight: normal;
  color: #203643;
}

blockquote {

  font-style: italic;
  font-size:  93%;

  margin-left:  12px;
  border-left:  9px solid #b2b2b2;
  padding-left: 12px;

  padding-right: 33px;
 }

dl { 
  color: #203643; 
}

dt { 
}

dl { 
  color: #203643; 
}

table { 
  color: #203643; 
}

/* for body images, ideally 250px wide */

div.body-image-right
{  
  width: 250px;  
  text-align: center; 
  float: right; 
  clear: right;
  margin-left: 20px;
}   

div.body-image-right img
{  
  border: solid 1px #404822; 
  padding: 0px;
}  

div.body-image-right p
{   
  margin: 7px 7px 14px 7px;
  font-size: 80%;
}

div.body-image-right p.copyright
{
  font-size: 50%;
}

/* for body images, ideally 250px wide */

div.time-series
{  
  margin-bottom: 20px;
  clear: both;
}   

div.time-series img
{
  float: right; 
  clear: right;
  border: none; 
  margin-left: 15px;
  margin-bottom: 10px;
}  

div.time-series p
{   
  
}

/* 
   the list of subfolders 
*/

ul.list {
  list-style-image: url("dot.png"); 
  width: 60%;
  position: relative;
  left: 2%;
}

ul.list li {
  line-height: 130%;
  color: #203643;
}

/* 
   images have a border -- for thumb & palette anchor
   images this converts to dashed on hover
*/

img { 
  border: 1px solid black; 
  padding: 0px;
}

div.thumb a:hover img {
  border: 1px dashed black;
}

div.palette a:hover img {
  border: 1px dashed black;
}

/* 
   the area of a single thumbnail 

   width needs to be specified so that the browser knows
   how to arrange the other block elements, before the 
   thumbnail images actally arrive
*/

div.thumb {
  float: left;
  padding: 5px 5px 3px 5px;
  margin: 10px;
  width: 150px;
}

/* text below thumbnails and images */

div div.caption, div.name { 
  color: black;
  line-height: 130%;
  text-align: center;
  padding: 1px 4px;
}

/* color of links in captions */

div a { 
  color: #B85761;
}

/* color of links in the headers/footers */

p a { 
  color: #B85761;
}

/* text below thumbnails */

div div.name {
  font-size: 80%;
  white-space: nowrap;
  overflow: hidden;
}

/* the area all the thumbnails reside in */

div.thumbs {
  margin: 20px 20px 20px 20px;
}


/* table for image page */

table.impage {
  text-align: center;
  color: #000000;
  width: 100%;
  height: 100%;
}

td.align {             
  vertical-align: middle;
  text-align: center; 
}

div.imcont {
  position: relative;
  margin: 0 auto;
  width: 360px;
  height:200px;
  text-align: left;  
}

/* table used for image page */ 

table.imtab { 
  text-align: center;
  vertical-align: middle;
  color: #000000;
  width: 240px;
  margin: 0;
}

table.imtab h2 {
  font-size: 110%;
  font-weight: bold;
  letter-spacing: 1pt;
  padding: 4px 0px 2px 0px;
  margin:0;  
}

table.imtab h3 {
  font-size: 70%;
  font-weight: normal;
  color: #203643;
  padding: 2px 0px 3px 0px;
  margin:0;
}

table.imtab p {
  clear: both;
  font-size: 90%;
  padding:0;
  margin:0;
}

table.imtab img {
    background-repeat: no-repeat;
    background-position: center; 
    background-image: url("chessboard.png");
}

div.palette img {
    background-repeat: no-repeat;
    background-position: center; 
    background-image: url("chessboard-small.png");
}

div.thumb img {
    background-repeat: no-repeat;
    background-position: center; 
    background-image: url("chessboard-small.png");
}

td.main {
  background: rgb(249,249,249);
  padding: 15px 15px 12px 15px;  
  border: 1px solid #888; 
  border-radius: 10px;
  box-shadow: 0px 3px 15px #888;
}

div#status {
  min-height: 20px;
}

div#status p {
  font-size: 80%;
}

td.tagbox {
  padding-left:30px; 
}

td.prev, td.next { padding-top: 30px; } 

td.next a,p { padding-right: 0px; }
td.next a   { float: right; } 
td.next p   { text-align: right; }

td.prev a,p { padding-left: 0px; }
td.prev a   { float: left; }
td.prev p   { text-align: left; }

/* 
   hack - for gecko-based browsers (which will collide the address 
   with the thumbnails without this intermediate spacer
*/

div.spacer { 
  clear:       both;
  height:      0;
  line-height: 0;
}

/* 
  the footer - we want left/right parts, so dispense
  with the usual <address> environment 
*/

div.address {
  margin: 5% 4% 3% 4%; 
  font-size: 80%;
  color: #203643;
  font-style: normal;
}

div.validate { 
  float: left;
}

div.author { 
  float: right;
  clear: right; 
}

/* color of links in the footer */

address a { 
  color: #B85761;
}