/*
-----------------------------------------------
Photo Gallery Templates: Main Style Sheet
Author:   Douglas Bowman
Version:  1.1 - 10 May 2006
The design and Movable Type templates that 
build these pages are available for anyone to 
download and use:
http://stopdesign.com/templates/photos/
----------------------------------------------- */
#content {
	margin-left: 280px;
	background-color: #FFFFFF;
}

#art-intro {
	position: relative;
	top: -50px;
	width: 100%;
}

#masthead h1 img {
	margin-top: -20px;
}

.title, .index {
  text-align:center;
  }

.photosolo #content {
  padding:25px 0 15px;
  }
  
.index #content, .archive #content, .recentcomments #content, .comments-entry #content {
  width:720px;
  margin-left:auto;
  margin-right:auto;
  }
  
.title #content {
  width:733px;
  margin-left:auto;
  margin-right:auto;
  padding:40px 20px 0;
  text-align:left;
  }
.comments-entry #content {
  margin-top:1em;
  padding-top:0;
  }

/* =Headings
----------------------------------------------- */
h2 {
  margin:.5em 0 .75em;
  font:145% Verdana;
  color:#974;
  }
h2 .btn {
  margin-left:.25em;
  font-weight:normal;
  color:#666;
  }
.index h2, .archive h2, .recentcomments h2 {
  background:url("../img/slide_minis.gif") no-repeat 50% 0;
  margin:0 0 8px;
  padding:24px 0 0;
  font-size:100%;
  line-height:1.4em;
  font-family:Verdana;
  font-weight:normal;
  text-transform:uppercase;
  letter-spacing:.2em;
  text-align:center;
  color:#333;
  }
.galleries h2 {
  position:relative;
  top:-10px;
  margin-bottom:0;
  }

/* =FavList
Module on Index page displaying tiny thumbnails 
of most recent favorite photos
----------------------------------------------- */
#favlist {
  float:left;
  width:204px;
  margin:0 -3px 0 0;
  padding:0 0 0 6px;
  list-style:none;
  }
#favlist li {
  background:url("../img/bg_slide_sm.gif") 0 0 no-repeat;
  float:left;
  width:62px;
  margin:0 6px 6px 0;
  padding:0;
  }
html>body #favlist li {
  background-image:url("../img/bg_slide_sm.png");
  }
#favlist table {
  width:62px;
  height:62px;
  margin:0;
  border-collapse:collapse;
  font-size:1px;
  }
#favlist td {
  padding:0 2px 2px 0;
  text-align:center;
  vertical-align:middle;
  }
#favlist li a {
  border-width:0;
  }


/* =Gallery Info
Title, description, & prefs on Photo Gallery page
----------------------------------------------- */
.galleryinfo {
	clear:left;
	float:left;
	width:200px;
	margin:0;
	line-height:1.4em;
  }

.galleryinfo .desc {
  line-height:1.6em;
  margin-bottom:1em;
  }
.galleryinfo form {
  margin:0 0 .5em;
  padding:5px 0;
  }
.galleryinfo fieldset {
  margin:0 0 .75em;
  padding:.25em 0 .5em;
  border-width:0;
  border-bottom:1px dotted #ccc;
  }
.galleryinfo form strong {
  display:block;
  margin:0;
  padding:0 0 .25em;
  color:#222;
  }
.galleryinfo fieldset div {
  margin:0 0 .25em;
  }


/* =Thumbs
Reusable style for thumbnail photos as slides
----------------------------------------------- */
.thumb {
  background:url("../img/bg_slide.gif") 0 0 no-repeat;
  display:block;
  float:left;
  margin:0;
  padding:0 3px 3px 0;
  }
html>body .thumb {
  background-image:url("../img/bg_slide.png");
  }
.thumb span {
  background-repeat:no-repeat;
  background-position:50% 100px;
  display:block;
  }
.thumbv span {
  background-position:9px 50%;
  }
.thumb em {
  background-repeat:no-repeat;
  background-position:50% 50%;
  display:block;
  }
.thumb a, .thumb a:link, .thumb a:visited {
  background:none !important;
  display:block;
  width:120px;
  height:120px;
  border:none;
  text-indent:-9999px;
  font-size:1px;
  line-height:1px;
  }


/* =Slideset
Normal group of slide-like thumbnails
----------------------------------------------- */
.slideset {
	float:left;
	position:relative;
	width:550px !important;
	width: 600px;
	margin:0 0 15px 0;
	padding:0 15px;
	list-style:none;
	line-height:1.4em;
  }
.slideset .thumb {
  float:left;
  margin:0 10px 10px 0;
  }
 .slidesetphoto {
 	float: left;
	position: relative;
	width: 650px !important;
	width: 700px;
	margin: 0 0 15px 0;
	padding: 0 15px;
	list-style: none;
	line-height: 1.4em;
 }


/* =Individual Photo
----------------------------------------------- */
/* NOTE:
   See the PhotoDimensions section below to
   customize your own photo dimensions */
.main {
  text-align:center;
  }
#photo {
	margin:0 0 10px;
  }
#photo strong {
	background:#fff;
	/* position:relative; 
	top:-3px;
	left:-3px;
	*/
	display:block;
	margin:0 0 10px 0; 
	border-width:0; 
  }

#photo img {
  display:block;
  /* position:relative; 
  top:3px;
  left:3px; */
  border:10px solid #fff;
  }

/* =PrevNext Nav (Individual Photo template)
Thumbnails used for prev/next photo navigation
----------------------------------------------- */
#prevnext {
	position:absolute;
	top:60px;
	left:70px;
  }
#prev, #next {
  position:absolute;
  top:0;
  width:123px;
  margin:0;
  font-weight:bold;
  }
#prev a, #next a {
  width:120px;
  }


/* =PrevNextHovers (Individual Photo template)
The two hoverable regions overlaying the main photo
----------------------------------------------- */
/* Note:
   Width and height for the following
   strong element is set inline using the style 
   attribute. Both values are automatically 
   determined by taking the width/height of the 
   main photo.
   Width is ((width of main photo + 20) / 2).
   Height is (height of main photo + 20). */
#prevnext a strong {
	position:absolute;
	top: -3px;
  }
#prev a strong {
  background:url("../img/photonav_prev.gif") no-repeat 50% -100px;
  }
#next a strong {
  background:url("../img/photonav_next.gif") no-repeat 50% -100px;
  }
html>body #prev a strong {
  background-image:url("../img/photonav_prev.png");
  }
html>body #next a strong {
  background-image:url("../img/photonav_next.png");
  }
#prev a:hover strong, #next a:hover strong, #prev a:active strong, #next a:active strong {
  background-position:50% 10px;
  cursor:pointer;
  }


/* =Description (Individual Photo template)
Title and description of photo
----------------------------------------------- */
#desc {
	position: relative;
	top:190px;
	width:200px;
	text-align:left;
	margin-left: 670px;
	padding-top: 5px;
  }
/* See PhotoDimensions for left padding of h1 */
#desc h1 {
	background: transparent url(../img/divider_r.gif) no-repeat top left;
	max-width:30em;
	margin:0;
	padding:10px 15px 5px 0;
	border-width:0;
	font:bold 100% Verdana;
	line-height:1.6em;
	letter-spacing:0;
	text-transform:none;
	text-align:left;
  }
html>body #desc h1 {
  background-image:url("../img/divider_r.png");
  }
/* See PhotoDimensions for left padding of p */
#desc p {
  max-width:30em;
  margin:0 0 .75em;
  padding:0 15px 0 0;
  }
#desc p.posted {
  margin-top:1.25em;
  }


/* =Meta info (Individual Photo template)
Photo x of y, date, and keywords
----------------------------------------------- */
#meta {
	position:absolute;
	top:190px;
	left:0;
	width:150px;
  }
#meta ul {
  margin:0;
  padding:0 15px 0 15px;
  list-style:none;
  }
#meta li {
  background:none;
  text-align:right;
  padding-bottom: 10px;
  }
#meta li.count {
  background:url("../img/divider_l.gif") no-repeat 100% 0;
  padding-top:10px;
  padding-bottom:10px;
  }
html>body #meta li.count {
  background-image:url("../img/divider_l.png");
  }


/* =PhotoDimensions (Individual Photo template)
------------------------------------------------------------------------------------- */
/* Measurements you should change if you'd like 
to use different dimensions for the main photo.
All measurements are based off main photos' 
maximum width. Default "MaxWidth" for photos 
(per template docs) is 480. */

/* Sets width of main (center) column.
[value] = MaxWidth + 20
EG: 480 + 20 = 500
----------------------------------------------- */
.main {
  width:500px;
  }

/* Determines position of prev/next thumbnails.
Measurement is distance from center of main 
photo to the nearest edge of slide background 
image. */
#prev {
  /* [value] = (MaxWidth / 2) + 22 */
  right:262px;
  }
#next {
  /* [value] = (MaxWidth / 2) + 25 */
  left:220px;
  }

/* Determines offset of prev/next hoverable
regions that overlay the main photo. Measurement 
is distance from nearest edge of slide 
background image back to center of main photo. */
#prev a strong {
  /* [value] = 0 - (MaxWidth / 2) - 22 */
  right:-262px;
  }
#next a strong {
  /* [value] = 0 - (MaxWidth / 2) - 25 */
  left:-265px;
  }

/* Determines position of title and description.
Measurement is distance from center of main
photo to left edge of content. */
#desc h1, #desc p {
  /* [value] = (MaxWidth / 2) + 25 */
  padding-left:265px;
  }

/* Determines position of meta info such as 
Photo x of y, date, & keywords. Measurement is 
distance from center of main photo to left 
edge of content. */
#meta ul {
  /* [value] = (MaxWidth / 2) + 25 */
  padding-right:265px;
  }

/* =Count
Miscellaneous portions of the UI that display
a total count of photos for each gallery
----------------------------------------------- */
.count {
  font-style:italic;
  }
.galleryinfo .count {
  background:#6f0f0f;
  display:block;
  margin:0 0 .5em;
  padding:2px 5px;
  font-style:normal;
  color: #FFFFFF;
  }
#info p.count {
  margin:3em 0 1.5em;
  padding:5px 0;
  border:solid #bbb;
  border-width:1px 0;
  font-size:100%;
  line-height:1.6em;
  }
input.btn, .header form select {
  vertical-align:middle;
  font-size:100%;
  }

/* Sets width of main (center) column.
[value] = MaxWidth + 20
EG: 480 + 20 = 500
----------------------------------------------- */
.main {
	width: 508px;
	margin: 0 0 0 160px;
	text-align: center;
  }
  
.webmain {
	width: 500px;
	height: 500px;
	margin: 80px 0 0 160px;
	text-align: center;
}

.webmainsmall {
	width: 500px;
	height: 275px;
	margin: 0 0 0 160px;
	text-align: center;
}

.webmaindev {
	width: 500px;
	height: 320px;
	margin: 0 0 0 160px;
	text-align: center;
}

/* Determines position of prev/next thumbnails.
Measurement is distance from center of main 
photo to the nearest edge of slide background 
image. */
#prev {
	/* [value] = (MaxWidth / 2) + 22 */
  left: -41px;
  }
#next {
	position: relative;
	margin-left: 380px;
  }

/* Determines offset of prev/next hoverable
regions that overlay the main photo. Measurement 
is distance from nearest edge of slide 
background image back to center of main photo. */
#prev a strong {
	/* [value] = 0 - (MaxWidth / 2) - 22 */
  right:-225px;
  }
#next a strong {
	/* [value] = 0 - (MaxWidth / 2) - 25 */
  left:-217px;
  }

/* Determines position of title and description.
Measurement is distance from center of main
photo to left edge of content. */
#desc h1, #desc p {
	/* [value] = (MaxWidth / 2) + 25 */
  padding-left:0px;
  }

/* Determines position of meta info such as 
Photo x of y, date, & keywords. Measurement is 
distance from center of main photo to left 
edge of content. */
#meta ul {
	padding: 5px;
  }

/* If customizing the photo dimensions, one 
more value needs to change in the Individual
Photo template (t_photo.php). Search for the 
following tag:
<$MTSetVar2 name="padvalue" value="480"$>
and change the value to your new photo MaxWidth.



/* End of custom values
------------------------------------------------------------------------------------- */