<style>

/*	This is a Basic Layout template that produces a quasi-fixed site layout, with a minimum width
	of 800px and a max of 1200px.  


	(1-1)  	Established the frame-out of the basic template.  #Title Row containing #Title Bar.
		Content Panel consisting of #Workspace, which contains #LCP (Left Content Panel), 
		#MCP (Main Content Panel).  Finally, #Footer, which is fixed at the bottom of the 
		page.
	(1-2)	#LCP and #MCP are positioned to the top and bottom left corners of the #WorkSpace.
		Workspace height is set at 100%.  Not sure how this will effect when content expands.

	(2-0)	Started to define the site specific link bar.
	(2-1)	Defined title bar UL characteristics.  Gave UL a min-width to keep LIs from collapsing.
		Defined LI style as display:inline, which results in horizontal lists.
	(2-2)	Used LI A to set the styling and padding associated with the LI items.  This is because
		they are all links, and this lets the link size encompass all of the LI space.
	(2-3)	Styled #LCP UL for generic left side navigation.
	(3-0)	Firearms Specific Styling
	(3-1)	Defined #SiteLogo, #SiteTitle, and #SiteLogoRight within #TitleRow.  Also switched 
		#TitleBar position to absolute, and anchored to the bottom of parent #TitleRow.
	(3-2)	Positioning issues resolved.  Floated #SiteTitle left, provided a right-margin the width of 
 		#SiteLogoRight plus it's right margin.  Shifted #SiteLogoRight up by the height of #SiteTitle
		plus it's borders.		
	(3-3)	Defined the title links with .link1 and .link2 classes.
	(3-4)	White Theme
	(4-1)	Fixed Width Layout
	(4-2)	Center on Page
	(5-0) 	Fancier CSS
	(5-1)	Replaced BODY background with blue gradient.
	(5-2)   Replaced TitleBar with gold gradient.  Replaced hover on TitleBar LI with reverse gold gradient.
	(5-3)	Added Polaroid Class
	(5-4)	Modified height on WorkSpace to a min-height.  Need to fix footer.

	(6-0)	Fixed position footer, columns aligned via display:table.
	(7-0)	Drop Down Menus
	(7-1)   Things affecting the TitleBar menu links.
	(7-2)   Things affecting the TitleBar submenu links.
	(7-3)   Things affecting the TitleBar sub sub menus.
		Not sure why 3rd child LIs require !important declarations for link color, but put 'em in there.
	(7-4)   Established vertical centering in sub sub menu buttons.
	(7-5)   Applied vertical centering pack to TitleBar 1st level LIs (Main menu)
		(7-5a)  I am essentially repeating the same vertical centering pack on all LIs.
			There has to be a way to write it once and target all child LIs.
		(7-5b)  I applied a fixed width to #TitleBar UL LI, which had no width before.  I assigned a 
			matching width to #TitleBar UL LI A so that any links would be as wide as the LI.  I 
			am still able to use link height to determine the LI parent container height.  These 
			characteristics seem to successfully propogate to submenus. 
		(7-5c)  Experiment deleting left fixed position and adjusting by margin.
	(8-0)   Working on Polaroid caption spacing.
	(8-1)   Added two polaroid classes to deal with vertical images in the polaroid format.  Width/height 
     		correction only works when hovering over the image itself.  An acceptible compromise for the 
           	time being.
	(9-1)   Modifications to column layout.
	(9-2)   Used absolute positioning on LCP to get rid of bottom gap.  Offset with right margin for MCP.
                It didn't work.  I had to absolute position MCP as well.  That stopped the iframe resize from working.
		I deleted all the positioning commands.


*/


BODY {
	/*background: url("garagefloor04.png") grey;*/			/*  (5-1)  Removed.  Replaced by cross-browser gradient.  */		
	background: -moz-linear-gradient(top,  #1e5799, #7db9e8);
	background: -ms-linear-gradient(top,  #1e5799, #7db9e8); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
		
     }

#PageCenter {							/*  (4-2)  */
		position: relative;
		max-width: 1200px;
		margin: 0 auto;
		height: 100%;
		
				
		/*border: 8px solid green*/
	     }



/*******************************   Title Panel  **********************************************************/

#TitleRow{
		border: 1px solid black;
		position: absolute;
		top: 0px; Left: 0px;
		width: 100%;
		min-width: 800px;				/*  (4-1)  */
		max-width: 1200px;				/*  (4-1)  */				
		height: 100px;					
		background-color: white;			/*  (3-4)  */
		padding-top: 2px;
			
	  }

#SiteLogo {							/*  (3-1)  */
		/*width: 60px;*/				/*  (3-4)  */ 
		height: 70px;
		border: 1px solid white;
		float: left;
		margin-left: 10px;
	  }

#SiteTitle{							/*  (3-1)  */	
		height: 55px;
		margin-left: 80px;
		margin-right: 80px;
		border: 1px solid white;
		text-align: center;
		padding-top: 15px;
		
		
	  }

   .link1 {	
		font-size: 26px;
		text-decoration: none;
		color: red;					/* (3-4)  */
           }
   .link1:after{ content: " | "; 
		 color: black;					/* (3-4)  */
	       }

   .link2 {
		font-size: 18px;
		text-decoration: none;
		position: relative; top: -2px;			/*  (3-3)  Little bit of offset for the smaller of the two links.  */
	  }


#SiteLogoRight{							/*  (3-1)  */
		float: right;
		/*width: 60px;*/				/*  (3-4)  */
		height: 70px;
		border: 1px solid white;
		margin-right: 10px;
		margin-top: -72px;				/*  (3-2)  Offset 2px for border width.  */
				
	       }



#TitleBar{	
		position: absolute; 				/*  (3-1)  Anchored child TitleBar to bottom of parent TitleRow*/
		bottom: -1px; 
		left: -1px;					
		border: 1px solid black;
		width: 100%;
		min-width: 784px;				/*  (4-1)  */
		max-width: 1198px;				/*  (4-1)  */

		height: 20px;
		
		/*background-color: white;*/			/*  (5-2)  Removed.  (3-4)  */
		background: -moz-linear-gradient(top,  #FEF6D6, #D4AF37);
		background: -ms-linear-gradient(top,  #FEF6D6, #D4AF37); /* IE10+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEF6D6', endColorstr='#D4AF37',GradientType=0 ); /* IE6-9 */
		
		
		padding-top:    2px;
		padding-bottom: 2px;
		padding-right: 2px;
		
		
		font-size: 12px;
		color: red;
		text-align: left;
	  }

 /************  Title Bar Menu  ********************/

#TitleBar UL { 
		list-style: none;				/*  (7-1)  No Bullets  */
		display: inline-table;				/*  (7-1)  Display as horizontal table  */
		position: relative;
		top: -14px;					/*  (7-1)  Shift back up into title bar.
		/*border: 2px solid purple;*/
		
		padding: 0px;
		
	      }
#TitleBar UL:after {						/*  (7-1)  A clearfix derivative.  Used to clear floats used to render list items horizontally.  */
			content: " ";
			clear:both;
			display: block;
		    }



#TitleBar UL LI {
			float: left;				/*  (7-1)  LI items float.  Effectively makes them horizontal.  Still have to deal with float clearing issue.  */
			width: 120px;				/*  (7-5)  Assigned a fixed width to be inherited throughout all sub LIs.  */
		}					
#TitleBar UL LI:hover {						/*  (7-1)  Hover Gradient.  */
			background: -moz-linear-gradient(top,  #D4AF37, #FEF6D6);
			background: -ms-linear-gradient(top,  #D4AF37, #FEF6D6); /* IE10+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D4AF37', endColorstr='#FEF6D6',GradientType=0 ); /* IE6-9 */
		      }						
#TitleBar UL LI:hover a{color: red}				/*  (7-1)  Link color on hover here.  */
#TitleBar UL LI a {
			color: black;
			text-decoration: none;
		
	   		display: table-cell;			/*  (7-5)  Lets me use vertical-align for cell contents.  */
	   		vertical-align: middle;			/*  (7-5)  Only works with things that have a table-cell display.  */
	   		width: 120px;				/*  (7-5)  Matches width of LI container  */
	   		height: 24px;				/*  (7-5)  Establishes height of LI container  */
	   		padding: 0px;				/*  (7-5)  Override padding established in parent (#TitleBar UL LI a)  */
	   		padding-left: 20px;	 
		   }

#TitleBar UL UL { display: none}				/*  (7-1)  Hide nested ULs.  */
#TitleBar UL LI:hover > UL { display: block}			/*  (7-1)  Show nested UL on hover.  Targets LIs that have a child UL (> ul)  */


/***********************  Title Bar Submenus  ***************************/

#TitleBar UL UL{						/*  (7-2)  Child List Styling  */
		  background-color: white;
		  border-color: black;
		  position: absolute;
		  top: 100%;					/*  (7-2)  Position completely below the parent element.  */
		  z-index: 10;					
		}
#TitleBar UL UL LI {
			float: none;				/*  (7-2)  Clears the float command that caused the LIs to appear horizontal.  */
			position: relative;
			
			/* Ultimate CSS Gradient Generator pack.  */
			background: #45484d; /* Old browsers */
			background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  #45484d 0%,#000000 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%); /* IE10+ */
			background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

			border: 1px solid black;
		    }

#TitleBar UL UL LI A:link {color: white;}			/*  (7-2)  Child (submenu) UL LI link color.  */
		
#TitleBar UL UL LI:hover A:link {color: black}			/*  (7-2)  Child (submenu) UL LI link color on hover.  */


/***********************  Title Bar 2nd Submenus  *************************/
#TitleBar UL UL UL {
			position: absolute; 
			left: 100%; top:0;
			z-index: 10;
			border: 1px solid black!important;
		   }

#TitleBar UL UL UL LI {	
			/* Ultimate CSS Gradient Generator pack.  */
			background: #45484d; /* Old browsers */
			background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  #45484d 0%,#000000 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%); /* IE10+ */
			background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
			border: 1px solid black;
			
		       }

#TitleBar UL UL UL LI A{height: 30px;}
				
#TitleBar UL UL UL LI A:link{	color: white!important;}
#TitleBar UL UL UL LI:hover A:link {color: red!important;}



/***********************************    Content Panels  ***************************************************/

#Workspace{							/*  Workspace Panel  */
		border: 0px solid black;			/*  (7-5) Removed again (4-1) put back into circulation (3-4)  */
		background-color: white;
		position: relative;				/*  (9-1)  Removed, but put back in because I seem to need them for IE11  */
		left: 0px; top: 8px; 				/*  (9-1)  Removed, but put back in because I seem to need them for IE11  */
		display: table;
		width: 100%;					/*  (9-1)  Converted from 90% to prevent cut-off of pages in frame  */
		min-width: 800px;				/*  (4-1)  */
		/*max-width: 1200px;*/				/*  (4-1)  *//*  (9-1)  Remove  */
		/*min-height: 500px;*/				/*  (9-1)  Remove  */
		

				
          }

#LCP{		/*display: none;*/					/*  Left Content Panel  */
		display: table-cell;		
		width: 150px;		
		border: 2px solid red;
		width:         150px;
		padding-right:   5px;
		padding-top:    20px;
		padding-left:   10px;

		background-color: beige;
		
	
    }

#LCP UL {	margin-left: 10px;
		padding: 0px;					/*  (2-3)  Padding:0px removes innate padding associated with list items.  */
	}

#LCP LI {	list-style-type: none; }			/*  (2-3)  Removes native HTML bullets.  */
	

#MCP{		/*display: none;*/					/*  Main Content Panel  */
		display: table-cell;	
		/*min-width: 525px;*/
		/*max-width: 900px;*/
		border: 2px solid green;				/*  (3-4) removed  */
		
		padding-left: 20px;
		padding-right: 20px;
		background-color: white;			/*  (3-4)  */

			

    }


#Footer{	position: fixed;
		bottom: 0px; left: 0px;			
		width: 100%;
		margin: 0 auto;
                padding: 2px;
		border: 2px solid green;
		background-color: yellow;
		

		font-size: 10px;
		text-align: center;
		
	}

/*******************************  Generic Page Styling  *************************************************************/


  .placeholder{ width:         90px; 
		height:       125px;
		padding-left:   5px;
 	   	padding-right:  5px;
	   	padding-top:    0px;
	   	padding-bottom: 3px;
           	margin-left:   -10px;
		margin-top:    -2px;
		MARGIN-RIGHT:  28PX;
		margin-bottom: 35px;
		float: left; border: 2px solid transparent;}
  .polaroid{ 
  		width:         90px; 
		height:       125px;
		padding-left:   5px;
 	   	padding-right:  5px;
	   	padding-top:    5px;
	   	padding-bottom: 3px;
           	margin-left:   10px;
		margin-top:    10px;
		MARGIN-RIGHT:  10PX;
	

		border: 1px #F0F0F0;
	        background-color: white;



		background: -moz-linear-gradient(top,  #F5F5FF, #F2F2FA);
		background: -ms-linear-gradient(top,  #F5F5FF, #F2F2FA); 

		-moz-box-shadow: 3px 3px 4px #444;
		-webkit-box-shadow: 3px 3px 4px #444;
		box-shadow: 3px 3px 4px #444;

	        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FEFEFA',GradientType=0 ),
	                progid:DXImageTransform.Microsoft.Shadow(color=#888888,direction=230,strength=4);
		        
	   	float: left;

	   	text-align: center;
	   	font-family: 'Shadows Into Light Two', cursive;
	   	font-size: .8em;
	   	font-weight: 500;	   
	  }

  
  .polaroid img {
		  filter:none!important; 
		  width:100%;
     		  border:1px solid #CFCFCF; 				/*  Stops the drop shadow from showing on the image within the parent container.  */
		  margin-bottom: -6px;					/*  (8-0)  Monkeying with negative margins to pull 2-line caption up.  */
		}
  .polaroid img:hover {max-height: auto;}					

  .polaroid:hover{width:180px; height:245px; font-size: 1em;
		  position: absolute; z-index: 10;}				/*  Expand on Hover  */

  .polaroid a {color:black; text-decoration:none;}


  /*.polaroid a img{max-height: 90px;}	*/				/*  (8-1) Sets max height on static image.  Important for vertical orientation pictures.  */
  /*.polaroid a img:hover {max-height: 200px; max-width: 170px;}*/	/*  (8-1) Sets width and height caps on image while on hover.  Fails off hover, distorts pictures a bit.  */


.Absolute-Center {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: auto;
  position: relative;
  top: 0; left: 0; bottom: 0; right: 0;
	border: 1px solid red;
}


#curios{}

</style>