@charset "utf-8";
/* CSS Document */

div#content_main ul { position : relative; list-style-type : none; width : 800px; 
margin : 0 auto; /*  Removing default margins and paddings*/
padding : 0; padding-left: 30px; padding-top:15px; font-size:13px; font-weight:bold; color:#633; }/*  Removing default margins and paddings*/

div#content_main li { float : left; width : 220px; }

div#content_main li#one { background : url(../photos/thumb/bronze.jpg) no-repeat 50% 10px; border-bottom : 1px solid #a65146; }
div#content_main li#one:hover { background :#FCF1D6 url(../photos/thumb/bronze.jpg) no-repeat 50% 10px; border-bottom : 1px solid #a65146; }/*  50% from the left and 10px from top of the item*/
div#content_main li#two { background : url(../photos/thumb/FrenchLinen.jpg) no-repeat 50% 10px; border-bottom : 1px solid #a65146;  }
div#content_main li#two:hover { background :#FCF1D6 url(../photos/thumb/FrenchLinen.jpg) no-repeat 50% 10px; border-bottom : 1px solid #a65146;  }/*  50% from the left and 10px from top of the item*/
div#content_main li#three { background : url(../photos/thumb/Exotica2.jpg) no-repeat 50% 10px; border-bottom : 1px solid #a65146; }
div#content_main li#three:hover { background :#FCF1D6 url(../photos/thumb/Exotica2.jpg) no-repeat 50% 10px; border-bottom : 1px solid #a65146; }
/*  50% from the left and 10px from top of the item, same as above but here we set the right border to 0, I'm removing the border on the right from this list*/

div#content_main li#four { padding-top : .5em; background : url(../photos/thumb/fur.jpg) no-repeat 50% 3em; }
div#content_main li#four:hover { padding-top : .5em; background :#FCF1D6 url(../photos/thumb/fur.jpg) no-repeat 50% 3em; }
div#content_main li#five { padding-top : .5em; background : url(../photos/thumb/neckWear.jpg) no-repeat 50% 3em;  }
div#content_main li#five:hover { padding-top : .5em; background :#FCF1D6  url(../photos/thumb/neckWear.jpg) no-repeat 50% 3em;  }
div#content_main li#six { padding-top : .5em;  background : url(../photos/thumb/youTube.jpg) no-repeat 50% 3em;  }
div#content_main li#six:hover { padding-top : .5em;  ;background :#FCF1D6 url(../photos/thumb/youTube.jpg) no-repeat 50% 3em;  }


div#content_main li#one a, li#two a, li#three a { padding-top : 170px; line-height: 15px;} 
/*  here we set the top padding 160px to accomodate the image with its height of 160px*/
div#content_main li#four a, li#five a, div#content_main li#six a { padding-bottom : 170px; line-height: 15px;} 
/*  here we set the bottom padding 160px to accomodate the image with its height of 160px*/

div#content_main li a { display : block; 
/*  here we say display: block to make everything in the list clickable also as soon as we do this we can see the full size of the images*/text-align : center; border-bottom:0px;}
div#content_main li a:hover {color:#CC6600; }
div#content_main a:link,div#content_main  a:visited { text-decoration : none; color : #894a4f; font-weight : bold; border-bottom:0px;}
.portfolio { margin:0 auto; width:750px; text-align:center;}