/* CSS Document for Belmont Technology - thumbs.css */
/* Web development by CodeGeek.net, www.codegeek.net and Ray Franklin */
/* Ver 1.04 1/10/2010 - added slate_row5 class for row slate, fill_row5x* for 3rd party cams */
/* Ver 1.03 7/30/2009 - added special hr, wider, more margin */
/* Ver 1.02 5/27/2009 - added row_slate */

/* import main.css */
@import url(/styles/main.css);

.textblue
{
  color: blue;
}

.textred
{
  color: red;
}

.textgreen
{
  color: green;
}

/******* thumbnail image classes *****/
/* By giving the thumbnail containers relative position, the contents
   can be placed with absolute position relative to the container. */
.thumb_row2, .thumb_row3, .thumb_row4, .thumb_row5, .slate_row5, .thumb_row3p
{   position: relative;}

.thumb_row2
/* two thumbnails per row in content_lower */
{
	height: 259px;
	width: 587px;
	margin-top: 2px;
}

.thumb_row3
/* three thumbnails per row in content_lower */
{
	height: 184px;
	width: 587px;
	margin-top: 2px;
}

.thumb_row4
/* 4 thumbnails per row, 128 */
{
	height: 148px;
	width: 587px;
	margin-top: 2px;
}

.thumb_row5
/* 5 thumbnails per row, 128 */
{
	height: 135px;
	width: 587px;
	margin-top: 2px;
}

.slate_row5
/* slate for class 5 row, reduced height */
{
	height: 103px;
	width: 587px;
	margin-top: 2px;
}

.thumb_row
/* GP thumbnail row, no relative positioning */
{
	width: 587px;
	margin-top: 2px;
}

.thumb_prop
/* use with thumb_row to prop open row to a min height */
{
	height:140px;
	float:right;
	width:1px;
}

.thumb_rule
/* horizontal rule between thumbnail rows */
{
  background: url(/images_ui/thumb_rule.gif);
  height: 3px;
  margin: 6px 8px 12px 0;
}

.row_slate
/* Image class for row slate, which is 570x83, in same position as photo5abs_1.
   Uses thumb_row5. */
{
	position:absolute;
	top:22px;
	left:0px;
}

/* Use photo3_1-3 divs for 180x135 thumbnails.  
   Sized to fit 594 wide content_lower */
.photo3_3 
/* right-most image, first in source */
{
	float: right;
	margin:0 4px 0 0;
	width:180px;
}
.photo3_1 
/* left-most image, second in source */
{
	width:180px;
	margin:0 20px 0 0;
	float: left;
}
.photo3_2 
/* middle image, third in source */
{
	width:180px;
}

/******* new thumbnail image classes *****/
/* camera thumbnails, medium photos for a row of 1-3 */
/* Use photo3_1-3 divs for 180x135 thumbnails.  
   Sized to fit 594 wide content_lower.
   Using absolute position inside relative class .thumb_row */
.smphoto4
{
  float: left;
  margin: 12px 6px 0 0;
}
.photo2abs_1 
/* left-most image */
{
	position:absolute;
	top:22px;
	left:0px;
  width:280px; 
}
.photo2abs_2 
/* middle image */
{
	position:absolute;
	top:22px;
	left:307px;
  width:280px; 
}

.photo3abs_1 
/* left-most image */
{
	position:absolute;
	top:22px;
	left:0px;
  width:180px; 
}
.photo3abs_2 
/* middle image */
{
	position:absolute;
	top:22px;
	left:203px;
  width:180px; 
}
.photo3abs_3 
/* right-most image */
{
	position:absolute;
	top:22px;
	left:406px;
  width:180px; 
}

/* camera thumbnails, small photos for a row of 4 */
.smphoto3abs_1 
/* left-most image */
{
	position:absolute;
	top:22px;
	left:0px;
  width:141px; 
  font-size: 10px;
}
.smphoto3abs_2 
/* middle image */
{
	position:absolute;
	top:22px;
	left:148px;
  width:141px; 
  font-size: 10px;
}
.smphoto3abs_3 
/* right-most image */
{
	position:absolute;
	top:22px;
	left:296px;
  width:141px; 
  font-size: 10px;
}
.smphoto3abs_4
/* right-most image */
{
	position:absolute;
	top:22px;
	left:444px;
  width:141px; 
  font-size: 10px;
}
.fill_row4x3
{
	position:absolute;
	top:22px;
	left:148px;
}
.fill_row4x2
{
	position:absolute;
	top:22px;
	left:296px;
}
/* re-use smphoto3abs_4 class to fill row4x1 */

/* camera thumbnails, small photos for a row of 5 */
.photo5abs_1 
/* left-most image */
{
	position:absolute;
	top:22px;
	left:0px;
/*  width:111px; */
  width:111px; 
  font-size: 9px;
}
.photo5abs_2 
/* second from left image */
{
	position:absolute;
	top: 22px;
	left: 118px;
  width: 111px; 
  font-size: 9px;
}
.photo5abs_3 
/* center image */
{
	position:absolute;
	top: 22px;
	left: 236px;
  width: 111px; 
  font-size: 9px;
}
.photo5abs_4
/* 2nd from right image */
{
	position:absolute;
	top: 22px;
	left: 354px;
  width: 111px; 
  font-size: 9px;
}
.photo5abs_5
/* right-most image */
{
	position:absolute;
	top: 22px;
	left: 472px;
  width: 111px; 
  font-size: 9px;
}

/* ******************* Third Party Camera Classes ******************** */
.thumb_row3p
{
	height: 103px;
	width: 587px;
	margin-top: 2px;
}
.fill_row5x4
{
	position:absolute;
	top: 0;
	left: 118px;
}
.fill_row5x3
{
	position:absolute;
	top: 0;
	left: 236px;
}
.fill_row5x2
{
	position:absolute;
	top: 0;
	left: 354px;
}
/* camera thumbnails, small photos for a row of 5 */
.photo3p5_1 
/* left-most image */
{
	position: absolute;
	top: 0;
	left: 0px;
  width: 111px; 
  font-size: 9px;
}
.photo3p5_2 
/* second from left image */
{
	position: absolute;
	top: 0;
	left: 118px;
  width: 111px; 
  font-size: 9px;
}
.photo3p5_3 
/* center image */
{
	position: absolute;
	top: 0;
	left: 236px;
  width: 111px; 
  font-size: 9px;
}
.photo3p5_4
/* 2nd from right image */
{
	position: absolute;
	top: 0;
	left: 354px;
  width: 111px; 
  font-size: 9px;
}
.photo3p5_5
/* right-most image */
{
	position: absolute;
	top: 0;
	left: 472px;
  width: 111px; 
  font-size: 9px;
}

