/**********************************/
      /* Style Sheet for Conal's Corner */
      /* William J. Knight - 05/06/2008 */
      /* Last revised        10/30/2008 */
      /* Last revised        10/06/2011 */
      /**********************************/	  
      * html #footer {/*only ie gets this style*/
      	\height:52px;/* for ie5 */
      	he\ight:50px;/* for ie6 */
      }
	  
      html, body {height:100%}
	  
	  
      body {
      	padding:0;
      	margin:0;
      	background: #FFFFDD url(images/parch2.gif) repeat;
      	color: #000000;
      }
	  
      #outer{
      	height:100%;
      	min-height:100%;
      	min-width:500px;

      	margin-bottom:-52px;
      	color: #000000;
      }
	  
      html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
	  
      #header{
        width: 100%;
    	color: black;
      	text-align: center;
      	border-bottom: 1px solid black;		
      }

      #left {
        /* debug
        border: thin solid red;
		*/
      	position:relative; /*ie needs this to show float */
      	width:120px;
      	float:left;
      	display:inline; /*fix for ie double margin-bug*/
		margin-top: 10px;
      	margin-left: 1px;
      	height:1%;
      }
      #left p {padding-left:3px;padding-right:2px}
	  
      #right p {padding-left:3px;padding-right:2px}
	  
      #content {
        /* debug
        border: thin solid black;*/
        */
      	height:1%; /* combat IE's 3 pixel jog */
      	margin:0 210px 12px 135px;
      }

      .ProductImage {
         padding: 5px;
         background: white;
         border: medium double black; 
      }      
	  
      #right {
        /* debug 
        border: thin solid blue;
        */
      	position:relative; /*ie needs this to show float */
      	width:200px;
      	float:right;
		margin-top: 10px;
      	margin-right:2px;
      }
      
      #footer {
      	height:100px;
      	clear:both;
      	border-top:1px solid black;
      	text-align:center;
      	position:relative;
      }
      
      #clearfooter{
         clear:both; 
         height:40px; 
      }	 /*needed to make room for footer*/
	  
      div,p  {margin-top:0} /*clear top margin for mozilla*/
	  
      #left IMG,#right IMG {margin-top:3px}

      /* Quick menu to cafepress sections */	  
        .jumpmenu {
           width: 780px;
           padding:0; 
           margin:0 auto; 
           list-style-type:none;
        }
        .jumpmenu li {
           float:left;
           border:1px solid #fff; 
        }
        .jumpmenu a {
           display:block;
           font-size: 0.65em;
           text-align:center; 
           width: 60px;  /* definition of menu button size */
           height: 15px;
           padding: 2px; 
           text-decoration:none; 
           float:left; 
           color: black;
           background: #FFFFDD;
           border: 1px solid black;
        }
        .jumpmenu a:hover {
           color: red;
           background: #ffff99;
        }
      /* These CSS definitions allow the floating menu to work -             */
      /* The Content DIV is 150px left to allow room for the floating        */
      /* menu, which will occupy the left 150px of the page as the menu DIV. */
      
      div#menu {padding-left: 0px;}
      
      /* these  are special settings for the menu box to display the   */
      /* colors and Borders I want.                                   */
      
      div#menubox {float: none; 
                   width: 120px; 
                   text-align: center; 
      /*             border: 5px ridge silver; */
      }
      
      div#bottom-menubox {float: none; 
                   width: 120px; 
                   text-align: center; 
      /*             border-top: none;                */
      /*             border-left: 5px ridge silver;   */
      /*             border-right: 5px ridge silver;  */
      /*             border-bottom: 5px ridge silver; */
      }			 
         
      /* This is a CSS trick for roll-overs in the menu. I'm using a     */
      /* single image, which has the normal, hovered, and active images  */
      /* stacked.  hovering or activating will change the background     */
      /* position of the image displayed, and change the text-decoration */
      
      div#menu ul {margin: 0;
                   padding: 0;
                   list-style-type: none;}
      
      div#menu li {height: 30px;
                   width: 120px;
                   margin: 0px;
                   font-family: Arial, Helvetica, sans-serif;
                   font-size: 10px;
                   text-align: center;
                   line-height: 30px;
                   list-style-type: none;
                   background-image: url('images/buttons.png');
                   background-repeat: no-repeat}
      
      div#menu li a {color: #000000;
                     display: block;
                     width: 100%;
                     height: 100%;
                     text-decoration: none;}
      
      div#menu li a:link {color: #000000;
                          background-image: url('images/buttons.png');
                          background-position: 0px 0px;}
      
      div#menu li a:visited {color: #000000;
                             background-image: url('images/buttons.png');
                             background-position: 0px 0px;}
      
      div#menu li a:hover {color: #000000;
                           font-weight: bold;                     
                           background-image: url('images/buttons.png');
                           background-position: 0px -30px;}
      
      div#menu li a:active {font-weight: bold;
                            color: #000000;
                            background-image: url('images/buttons.png');
                            background-position: 0px -60px;}
      					 
      body#homepage a#homepage,
      body#aboutus  a#aboutus,
      body#whatsnew a#whatsnew,
      body#heraldry a#heraldry,
      body#sitemap  a#sitemap {color: blue; font-weight:bold;}