/*
Description: Ecommerce Site by Integrated ID Systems, Inc.
Version: 1.0
*/


html,body{margin:0;padding:0;}
body{font: 76% verdana,arial,sans-serif;text-align:center;}
a{color: #4c508f;}
div#header{width:1024px;height:90px;background-color:#fffff;}
div#topnav{width:1024px;height:30px;background-color:#c3c5d4;}
div#container{background-color:#fffff;text-align:left}
div#content p{line-height:1.4;}
div#leftcol{background:#4c508f;margin-bottom: 5px;padding-right:1px;}
div#extra{background:#c3c5d4;padding-right:1px;}
div#footer{background:#4c508f;color: #FFF;}
div#footer p{margin:0;padding:5px 10px}

div#header{margin-bottom: 2px;}
div#topnav{margin-bottom: 2px;}
div#container{width:1024px;margin:0 auto}
div#content{float:right;text-align:center;width:820px;margin:0 8px 0 0;padding:4px; border: 1px solid #4c508f; background-color:#FFF;
display:inline;}
div#leftcol{width:180px}
div#extra{clear:right;width:180px;margin:0 8px 0 0;padding:4px; border:1px solid #4c508f;}
div#footer{clear:both;width:1024px;text-align:center;}


#gallery {padding:5px; background:#4c508f; margin:0 auto;}
* html #gallery {width:180px;}
#gallery dt {border:1px solid #fff; border-color:#000 #cde #cde #000; text-align:center; background:#c3c5d4; padding:4px 0; margin:2px 0; font-weight:bold; color:#fffff;}
#gallery dd {padding:0; margin:3px 0; text-align:center; background:#4c5o8f;}
#gallery div, #gallery span {border:1px solid #000;}
#gallery .hh {padding:1px 0;}
#gallery span {display:block;}
#gallery .aa {border-color:#b7cabd #698572 #698572 #b7cabd;}
#gallery .bb {border-color:#698572 #93b09c #93b09c #637e6c;}
#gallery .cc {border-color:#5a7362 #a2baaa #a2bbaa #5c7564;}
#gallery .dd {border-color:#5a7362 #a2baaa #a2bbaa #5c7564;}
#gallery .ee {border-color:#6f8d79; padding:0 2px 0 0;}
* html #gallery .ee {padding:0;}
#gallery a, #gallery a:visited {display:block; width:100%; border:1px solid #000; color:#fff; text-decoration:none;}
#gallery .ff {border-color:#d1ddd5 #5f6962 #5f6962 #d0ddd4;}
#gallery .gg {border-color:#c9d7cd #7c8980 #7c8980 #c8d6dd;}
#gallery .hh {border-color:#c0d0c5 #9aaa9f #9aaa9f #bfd0c5;}
#gallery a:hover {background:#676ff8; color:#000;}
#gallery a:hover .ff {display:block;border-color:#5f6962 #d0ddd4 #d1ddd5 #5f6962;}
#gallery a:hover .gg {display:block;border-color:#7c8980 #c8d6dd #c9d7cd #7c8980;}
#gallery a:hover .hh {display:block;border-color:#9aaa9f #bfd0c5 #c0d0c5 #9aaa9f; padding:2px 0 0 0;}


/* I want to be able to change an image next to an HTMl href link when the user hovers over 
either the image or the text of the link

.link1 { 
background-image: url(path/to/the/image.jpg); 
background-position: 0 50%; /* first value sets the image position on the x axis, second value sets the image position on the y axis. I usually center it, it's up to you. */ 
background-repeat: no-repeat; 
padding: 0 0 0 20px; /* if I want the image to be on the left side of the link - here I prepare enough space for the image and the text on the right-hand side */ 
} 
.link1:hover { 
background-image: url(path/to/the/image_hover.jpg); 
}

*/