/* CSS document by High Plains Web Design */

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
	background: #73ADD7 url(../images/gradient.gif) repeat-x;
	color: #666;
}
#page {
	background: url(../images/sky.jpg) no-repeat center top;
	width: 100%;
	display: table;
}
#content {
	width: 900px;
	margin: 12px auto 0;
	padding: 5px;
}
	
#title {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.middle-column-img-right{
	margin: 0.5em 0pt 0.5em 0.8em;
	float:right;
}
.middle-column-img-left{
	float: left;
	margin: 0.5em 0.5em 0.3em 0.9em;
}
.right-column-img-right{
	float: right;
	margin: 0.5em 0.5em 0.3em 0.9em;
}

/* format for picture and caption */
.pictureleft{
	background-color: #F9F9F9;
	border: 1px solid #CCCCCC;
	padding: 3px;
	font: 9px/1.4em Arial, sans-serif;
	text-align: center;
	float: left;
}

.pictureright{
	background-color: #F9F9F9;
	border: 1px solid #CCCCCC;
	padding: 3px;
	font: 9px/1.4em Arial, sans-serif;
	text-align: center;
	float: right;
}

.picture img {
	border: 1px solid #CCCCCC;
	vertical-align:middle; margin-bottom: 3px;
}
.right {
	margin: 0.1em 0.1em 0.5em;
	float:right;
}
.left {
	margin: 0.1em 0.1em 0.5em;
	float:left;
} 

#breadcrumbs {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	padding-top: 30px;
	color: #00CC33;
	text-decoration: none;
	margin-right: 5px;
	margin-top: 10px;
	margin-left: -25px;
}
#breadcrumbs a{
	color: #469ECE;
	margin-right: 10px;
}

#breadcrumbs a:hover{
	color: #99CC66;
}

#linkPos a{
	margin-right: 5px;
	margin-top: -10px;
}

#upperspacer {
	height: 6px;
	width: 900px;
}
#upperwrapper {
	margin: 0 auto 0;
	width: 900px;
}
#lowerwrapper {
	position: relative; /*** Let's be nice to IE ***/
	width: 900px; /*** Content Width ***/
	display: table; /*** For non-IE browsers ***/
	height: 100%;
	background-image: url(../images/middle.gif);
	background-repeat: repeat-y;
	margin: -12px auto 0;
	background-color: #FFEFDF;	/*position:relative;*/
}

#top {
	height: 160px;
	width: 900px;
	background-image: url(../images/top3.gif);
	background-repeat: no-repeat;
}

#header {
	height: 86px;
	margin: 0 auto 0;
	width: 900px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 36px;
	background-repeat: repeat-y;
	background-image: url(../images/header.gif);
	background-color: #FFEFDF;
}

#title {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}

#container {
	background-color: #F4DAC8;

}
#leftImage {
	margin-top: -20px;
	margin-bottom: 5px;
	height: 30px;
	width: 150px;
	position: relative;
}
#leftcolumn {
	float: left;
	width: 180px;
	padding-left: 25px;
	background-position: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: left;
	background-image: url(../images/middle.gif);
	background-repeat: repeat-y;	
}

#rightcolumn {
	float: right;
	width: 275px;
	background-color: #FFEFDF;
	background-image: url(../images/middle.gif);
	background-repeat: repeat-y;
	background-position: right;
	padding-right: 25px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align:left;
	
}

#centercolumn {
	float: left;
	width: 38%;
	padding-right: 10px;
	padding-left: 10px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #FFEFDF;
	text-align:left;
	
}

/*
#fixedphotos {
	background-image: url(../images/polaroid.gif);
	background-repeat: no-repeat;
	position: relative;
	height: 238px;
	width: 242px;
	float: right;
	margin-top: 5px;
	margin-right: 10px;
}
#logo {
	background-image: url(../images/logo.gif);
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: scroll;
	position: relative;
	height: 238px;
	width: 242px;
	float: left;
	margin-top: 5px;
	margin-right: 10px;
}
*/
#mylogo
{
width: 900px;
height: 100px;
position: relative;
}

#mylogo img {
width: 180px;
height: 212px;
position: absolute;
bottom: -100px;
left: 37px;
z-index:2;
}
#myphotos
{
width: 900px;
height: 40px;
position: relative;
}

#myphotos img {
width: 242px;
height: 238px;
position: absolute;
bottom: -80px;
left: 634px;
z-index:3;
}

#myflash {
	width: 133px;
	height: 135px;
	position: absolute;
	bottom: -19px;
	left: 673px;
	z-index:43;
	background-color: #999999;
}


#footer {
	clear: both;
	width: 900px;
	background-image: url(../images/footer.gif);
	height: 86px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	margin: 0 auto 0;
	width: 900px;
	background-color: #FFEFDF;
}

#wall {
	background-image: url(../images/bg_bottom.gif);
	background-repeat: repeat-x;
	background-position: center bottom;
	height: 164px;
	position: relative;
	top: -80px;
	z-index: 3;
}
#map {
	margin-top: 5px;
	margin-left: 10px;
}
.polaroid-container{
    position:relative; /* for being able to use absolute positioning for the 'tape' images, explained below */
    float:left; /* with a float we can a)embed the polaroid photo within text and have it wrap around and b) we don't need to specify a width/height */
    margin: 20px; /* we want to put some space between the polaroid photo and the surrounding content */
}
.polaroid-shadow{
    background-color: #CCCCCC; /* a light gray color, for the pretend shadow */
    text-align: center; /* aligns the text and image to the center */
}

.polaroid{
    background-color: #FDFDFD; /* a light gray background */
    border: 1px solid #999999; /* a thin border in darker gray */
    position: relative; /* this allows us to move the the polaroid div without removing it from the flow of the page i.e. we can offset it and show the 'shadow' from below */
    left: -3px; /* we move the polaroid to the left... */
    top: -3px; /* ...and up */
}

.polaroid-content-container{
    margin: 10px 10px 15px 10px; / * a little extra margin at the bottom */
}

.polaroid-pic{
    display: block; /* this prevents the caption from sliding in next to the image,
                     since both are inline elements by default */
    border: 1px solid #CCCCCC; /* give the image a thin, slightly gray border */
    border-top: 1px solid #999999; /* then we override the border for the top and right... */
    border-right: 1px solid #999999; /* ...for a very subtle film-embedded-in-the-paper effect */
    margin-bottom: 7px; /* we need some gap betwen the image and caption, which also serves to increase the bottom portion of the polaroid, adding to the effect */
}

.polaroid-caption{
    color: #777777; /* dark gray for the caption text... */
    font-size: 0.75em; /* ...which will be 75% of the enclosing container's font... */
    font-style: italic; /* ...and will be italicised */
}
.tape{
    position: absolute; /* absolute positioning so that the images can be place at will. This works because the container class specifies relative positioning for the div */
}

.top-left{
    width: 80px; /* specify the width... */
    height: 87px; /* ...and height */
    top: -20px; /* place the image, offset it to top by 20px */
    left: -20px; /* and to the left by 20px */
    
    /* Only IE will use this filter */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='http://www.highplainswebdesign.com/kindahlichii4/images/tape-tl.png');
}

/* similar rules for the other tape */
.top-right{
    width: 87px;
    height: 80px;
    top: -20px;
    right: -20px;

    /* Only IE will use this filter */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='http://www.highplainswebdesign.com/kindahlichii4/images/tape-tr.png');
}

/* IE ignores styles with [attributes], so it will skip the following. */
.top-left[class] {
  background-image:url('http://www.highplainswebdesign.com/kindahlichii4/images/tape-tl.png');
}

/* IE ignores styles with [attributes], so it will skip the following. */
.top-right[class] {
  background-image:url('http://www.highplainswebdesign.com/kindahlichii4/images/tape-tr.png');
}