/* * * * * * * * * * */

/* Generic elements  */

/* * * * * * * * * * */



body {

  margin: 1em;

  font: small sans-serif;

  color: #000;

  background-color: #fff;

}



p, td, th, li, h4 {

  font: small sans-serif;

text-align: center;
}



h1, h2, h3 {

  color: #f60;

text-align: center;
}



h1 {

  font-size: large;

text-align: center;
}



a:link, a:visited {

  color: #09f;

  text-decoration: underline;

}



a:hover {

  text-decoration: none;

}



input, textarea, select, .inputbox {
  border: 1px solid #f60;

  color: #000;

  background-color: #fff;

}



input.radio {

  border: none;

  background-color: #fff;

}



input.button {

  font-weight: bold;

  border: 1px outset #fff;

  color: #fff;

  background-color: #f60;

}



a img {

  border: 0;

}





/* * * * * * * * * * */

/* Elements with IDs */

/* * * * * * * * * * */





/* header: image and/or title */

#header {
text-align: center; }



/* crumb line: (You are here: ...) */

#crumb {
text-align: center; }



/* footer: copyright notices */

#footer {

  text-align: center; 

background-image:url('images/footer.png');
background-repeat:no-repeat;
background-position:center; 
}





/* * * * * * * * * */

/* Custom classes  */

/* * * * * * * * * */





/* image or gallery name header */

.sgTitle {

  margin-bottom: 0;

}



/* image or gallery artist subheader */

.sgSubTitle {

  margin-top: 0;

}



/* image and artist name displayed beneath image */

p.sgNameByArtist { }



/* image and gallery details such as date, location, camera model, hits etc. */

p.sgDetailsList { }



/* language select box and template select box respectively */

div.sgLanguageFlipper, div.sgTemplateFlipper {

  float: right;

  clear: right;

}



div.sgClear {

  clear: both;

}



/* wraps the drop-shadow table to allow IE to center it */

div.sgShadow {

  text-align: center;

  padding: 1em;

}



/* the main content table that does the drop-shadow effect */

table.sgShadow {

  margin-left: auto;

  margin-right: auto;

  clear: both;

}


table.sgShadow {

  background-color: #f0f0f0;
  padding: 0;

  text-align: left;

}



table.sgShadow td {

  padding: 0;
 
 margin: 0;

}



/* div containing each gallery sub-gallery on a gallery page */

div.sgGallery {

  margin: 5px;

  padding: 5px;

  border: 1px solid #ccc;

  background-color: #fff;

}



/* the table cell containing the gallery thumbnail */

td.sgGalleryThumb {

  width: 100px;

  text-align: center;

}



/* the gallery thumbnail itself */
img.sgGalleryThumb {

  border: 1px solid #000;

}




/* the descriptive text (title, summary, contents) */

div.sgGallery p {

  margin-top: 0;

  margin-bottom: 2px;

}




/* full size image on an image page*/

img.sgImage {

  border: none;

}



/* the preview thumbnails and previous, thumbnails, next links */

p.sgTopNavBar, p.sgBottomNavBar {

  text-align: center;

  
}



/* wraps the thumbnail and rounded-corner code on an album page */

div.sgThumbnail {

  width:  124px;

  height: 124px;

  margin: 10px 5px;
  float: left;

	padding: 0px;
 
 text-align: center;

}



div.sgThumbnail table {

  width:  114px;

  height: 114px;

  margin: 0px;
  text-align: center;

  vertical-align: middle;

}



.sgThumbnailContent {

  background: #fff;
	margin: 0px;

	padding: 0px;

	border: 1px solid #ccc;

}




/* the following code does the rounded corners of the 35mm slide effect on 
   the album pages. Taken from http://www.albin.net/CSS/roundedCorners/ */
.roundedCornerSpacer {

    margin: 0px; padding: 0px; border: 0px;

    clear: both;

    font-size: 1px; line-height: 1px;

}

.borderTL, .borderTR, .borderBL, .borderBR {

    width: 5px; height: 5px;

    padding: 0px; border: 0px;

    z-index: 99;

}

.borderTL, .borderBL { float: left; clear: both; }

.borderTR, .borderBR { float: right; clear: right; }

.borderTL { margin: -1px 0px 0px -1px; }

.borderTR { margin: -1px -1px 0px 0px; }

.borderBL { margin: -5px 0px 0px 0px; }

.borderBR { margin: -5px 0px 0px 0px; }




/* appropriate background images for drop-shadow effect */

table.sgShadow td.tabl { background-image: url('images/shadow-tabl.gif'); width: 16px; height: 16px; }
table.sgShadow td.tabm { background-color: #fff; }
table.sgShadow td.tabr { background-color: #fff; }

table.sgShadow td.tl {  background-image: url('images/shadow-tl.gif'); width: 32px; height: 16px; }
table.sgShadow td.tm {  background-image: url('images/shadow-tm.gif');}
table.sgShadow td.tr {  background-image: url('images/shadow-tr.gif');}
table.sgShadow td.ml {  background-image: url('images/shadow-ml.gif');}
table.sgShadow td.mm {  padding: 10px;} /* cell containing image */
table.sgShadow td.mr {  background-image: url('images/shadow-mr.gif');}
table.sgShadow td.bl {  background-image: url('images/shadow-bl.gif');}
table.sgShadow td.bm {  background-image: url('images/shadow-bm.gif');}
table.sgShadow td.br {  background-image: url('images/shadow-br.gif'); width: 32px; height: 32px; }

/* the bit with previous, next */
table.sgShadow td.tabm div { 
  font-size: 13px;
  background: #f0f0f0 url('images/shadow-tabm.gif') top right;
  padding-right: 30px;
  float: left; 
}