/*
gallery-garden.css for gallery-garden.html
Author: LARS HIDDE
Class/Section: COIN 65.01, Spring 2011 
Created: 5/13/2011 - 6:22p
Updated: 
Copyright (c)2011 

*/

.clearFloat { clear: both; }  /* just in case I need this */


body {
	background: black 
	/*url(images/fence.jpg) 	*/
	0 0 
	no-repeat 
	fixed;
	}
	
	#page {
z-index: 2;
position: relative;
}


	h2 { 
		padding:0px;
		margin:17px;
		font-size: 16px;
		color: #c3c383;
		}
		
		
	h1 {
		margin: -9px -10px 0.5em -10.6px;

		padding: 15px 5px 5px; 
		text-align: right; 
		background: #899b60; 
		color: #024; 
		letter-spacing: 0.05em; 
		text-transform: lowercase; 
		font-family: futura; 
		font-size: 27px;
		font-weight: bold;
		height: 30px; vertical-align: middle; 
		white-space: nowrap;
		}


		

/* ............... HOVER text for gallery pics....................................*/
		

		
div.pic a span {display: none;} /*Prevent text from showing on page load*/
	
	
	/* Bring it back. Display to block and positioning the element on hover*/
		
	div.pic a {
		display: block; 
		text-align: center; 	
		   border-width: 0; 
		   text-decoration: none;
		   }
		   
	/* The last three lines relate to how the element will be styled
			when text appears. The first two cause it to be made visible
			(display: block;) */
			
	div.pic a:hover {color: #411;}
	
	div.pic a:hover span {
	    display: block;
	    position: fixed; 
	    	top: 10em;  left: 0; 
	    	width: 150px;
	    	padding: 5px; 
	    	margin: 15px; 
	    	z-index: 100;
	    color: #AAA; 
	    background: black;
	    font: 10px Verdana, sans-serif; 
	    text-align: center;
   		}

		
/* ................... CONTENT WRAPPER ............................*/


	
	
div#content { 
  /* background-color: #13140d;*/
   background: url("images/page-bg.png") repeat-y scroll left top transparent;
   background-position: 0 0;
   background-repeat: repeat-y;
   background-attachment: fixed;
   }
   
/* ......... #gallery and # content set up....(set WIDTH here).....................................*/
   
   
   
div#content {
	position: absolute; 
	width: 460px;   /*  ! set #content width for frame !  */
	top: 26px; 
	left: 161px; 
	right: 25px;
	   color: #EED; 
	   font: 13px Verdana, sans-serif; 
	   padding: 10px; 
	   border: ridge #28411B;
	}
	
	/*to set the number of pictures/row: ajdust WIDTH in #gallery AND #content */
	

	div#gallery {
		width: 420px; /*  ! set #gallery width as in #content above !  */
		margin: auto;
		}
		
		
/* ...................................................*/


div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}


/* ...................................................*/


      #content div.pic {
         float: left; 
         width: 130px; 
         margin: 0 10px 10px 0;       
         }

      #content div.pic img {
          margin: 10px  8px;
          border: 2px ridge #28411B;
          width: 100px;
          height: 75px;         
  	      }

      #content div.pic p {
         margin:  0;
         padding: 0 20px 30px 10px;
         text-align: center;
         font-style: italic;
         font-size: .76em;
         }


/* ...................................................*/


div#content a:link {color: white;}
div#content a:visited {color: #BBC;}
div#content a:link:hover {color: #FF0;}
div#content a:visited:hover {color: #CC0;}


/* ...................................................*/


/* ...........CALL OUT BOX - on top of the Gallery pic line up .......................*/

/* this sits within #box */

/*
.box {

width: 460px;
margin: auto;
}
*/

#paragraph2_aside  {

	margin: auto;
  	padding: 1em; 
  	border: 1px solid #a7a770; 
  text-align: justify;

  }
  
	#paragraph2_aside img  { 
		float: left;
		padding-right: 0.5em;
		margin: 10px 5px 6px 0;
		}
		
/* ......... END.................................*/