/*added jph for main image log in */
div.sg_no_login {
	width:100%;
	font-size:20px;
	color:#CC0000;
	font-weight:bold;
	margin-bottom:20px;
	text-align:center;
	background-color:#FFCCCC;	
	}
div.sg_login {
	border-style:solid;
	border-width:1px;
	background-color:#FFCCCC;	
	margin-bottom:20px;
	text-align:center;
	color:#000000;
    padding: 10px;	
	}
/* wraps the drop-shadow table to allow IE to center it */
div.sgShadow {
  text-align: center;
  padding: 10px;
  width:100%;
}
/* details list above matte jph*/
div.DetailsList_container{	
	padding-bottom:10px; 
	background-color:#CCCCCC;	
}
div.DetailsList_inside{	
	background-color:#eeeeee;	
}

/* image and gallery details list jph*/
div.sgDetailsList {
	padding-right:50px;
	padding-left:50px;
	padding-bottom:10px; 
	padding-top:10px; 
	background-color:#CCCCCC;	
}
/* mainpic details table HAS THE BORDER jph*/
table.sgDetailsList {
	border-style:solid;
	border-width:1px;
	border-color: #CCCCCC;
	padding:3px;
}
/* mainpic details table cells jph*/
td.sgDetailsList {

}

/* all thumbs preview images jph */
img.sgPreviewThumb{
	border: 1px solid #CCCCCC;
  	margin: 1px 1px 1px 1px;
}
img.sgPreviewThumbCurrent{
	border: 2px solid #CCCCCC;
  	margin: 1px 1px 1px 1px;
}
/*over all container for no-frame jph */

div.no_pic_frame{
	position:relative;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
	background-color:#CCCCCC;
}
/* mainpic page details labels text jph*/
td.sgDetailsList_val{
	color:#996600;
	text-align:left;
	vertical-align:top;

}
/* mainpic page info text jph*/
td.sgDetailsList_out{
	color:#000;
	text-align:left;
	vertical-align:top;
}

/* album template, main container jph */
div.sgShadowz{
  text-align: center;
  width:100%;
}
/* outside the thumbnail box on an album page jph*/
div.sgThumbnailz {
  	margin: 20px 10px 20px 10px;
  	float: left;
	height:180px;
	width:170px;
}
/* inside the thumbnail box on an album page jph*/
.sgThumbnailContentz {
    background: #fff;
	border: 1px solid #CCCCCC;
}
td.sgalbumtext{
	font-size:0.8em;
}

/* ================
gallery template, row container jph */
table.sgGalleryTable{
	border-style:none;
}
/* gallery template, row design, text colour jph */
table.sgGalleryRow{
	border-width:1px; 
	border-style:solid;
	color:#CCCCCC;
}
/*============================================*/
/* * * * * * * * * * */
/* Generic elements  */
/* * * * * * * * * * */

input.radio {
  border: none;
  background-color: #fff;
}

input.button {
  font-weight: bold;
  border: 1px outset #fff;
}

a img {
  border: 0;
}


/* * * * * * * * * * */
/* Elements with IDs */
/* * * * * * * * * * */


/* header: image and/or title */
#sgHeader { }

/* crumb line: (You are here: ...) */
#sgCrumb {
  float: right;
}

/* footer: copyright notices */
#sgFooter {
  text-align: center; 
}


/* * * * * * * * * */
/* Custom classes  */
/* * * * * * * * * */


/* image or gallery name header */
.sgTitle {
  font-size: 14px;
  margin-bottom: 0;
}

/* image or gallery artist subheader */
.sgSubTitle {
  margin-top: 0;
}

/* image and artist name displayed beneath image */
p.sgNameByArtist { }



/* language select box and template select box respectively */
div.sgLanguageFlipper, div.sgTemplateFlipper {
  float: right;
  clear: right;
}



/* the main content table that does the drop-shadow effect */
table.sgShadow {
  margin-left: auto;
  margin-right: auto;
  clear: both;
}

/* the tab with previous, up, next */
table.sgShadowTab td {

}

table.sgShadow, table.sgShadowTab {
}

table.sgShadow td {

}

table.sgShadow td.tabm, table.sgShadow td.tabr {

}

/* appropriate background images for drop-shadow effect */
table.sgShadow td.tl {  }
table.sgShadow td.tm {  }
table.sgShadow td.tr { }
table.sgShadow td.ml {  }
table.sgShadow td.mm {  } /* 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');}

/* div containing each gallery sub-gallery on a gallery page */
div.sgGallery {
}

/* the table cell containing the gallery thumbnail */
td.sgGalleryThumb{
}

/* the gallery thumbnail itself */
img.sgGalleryThumb{
  border-style:solid;
border-width:2px;
border-color:#cccccc;

}

/* the descriptive text (title, summary, contents) */
div.sgGallery p {

}


/* the preview thumbnails and previous, thumbnails, next links */
p.sgTopNavBar, p.sgBottomNavBar {
  text-align: center;
  float: right;
  clear: right;
}


/* wraps the thumbnail and rounded-corner code on an album page */
div.sgThumbnail {
  width:  120px;
  height: 140px;
  margin: 10px 5px 10px 5px;
  float: left;
  padding: 0px;
  text-align: center;
}

div.sgThumbnail table {
  width:  116px;
  height: 116px;
  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; }
/* IE5-5.5/win needs the border scooted to the left or right by an
additional 3px! Why? */
.borderTL {
    margin-left: -4px;
}
html>body .borderTL {
    margin-left: -1px;
}
.borderTR {
    margin-right: -4px;
}
html>body .borderTR {
    margin-right: -1px;
}
.borderBL {
    margin-left: -3px;
}
html>body .borderBL {
    margin-left: 0px;
}
.borderBR {
    margin-right: -3px;
}
html>body .borderBR {
    margin-right: 0px;
}