body { background: #000; text-align: center; padding: 0 0 0 0; margin: 0 0 0 0; font-family: "Trebuchet MS", Verdana, Arial; }
div.padd { padding: 10px 5px 10px 20px; }
br.break { clear: both; }

#containter { margin: 0px auto 0 auto; width: 820px; }
#logo { margin: 0 auto; width: 820px; clear: both;  }
#logo img { border: 0; }

#menu { width: 820px; height: 62px; background: url(img/bg-menu.jpg); text-align: center; clear: both; }
#menu p { height: auto; width: 800px; margin: 0 auto; }
#menu p a { color: #A0A0A0; text-decoration: none; width: auto; height: 30px; font-family: Arial, "Trebuchet MS", Verdana; font-size: 12px; display: block; float: left; margin: 20px 55px 0px 55px; }
#menu p a:hover { color: #C8C8C8; }

#introduction { width: 555px; color: #919191; font-size: 12px; text-align: left; background: url(img/bg-intro.jpg) no-repeat top #000; float: left; }
#introduction h2 { background: url(img/2arrows.gif) no-repeat left; padding: 0px 0px 0px 20px; font-size: 12px; font-weight: normal; margin: 0px 0px 20px 0px; }
#introduction a { color: #CFCFCF; text-decoration: none; border-bottom: 1px solid; }
#introduction a:hover { border-bottom: 0px; }

#projects { width: 555px; color: #919191; font-size: 12px; text-align: left; background: url(img/bg-intro.jpg) no-repeat top #000; float: left; }
#projects h2 { background: url(img/2arrows.gif) no-repeat left; padding: 0px 0px 0px 20px; font-size: 12px; font-weight: normal; margin: 0px 0px 20px 0px; }
#projects a { color: #CFCFCF; text-decoration: none; border-bottom: 1px solid; }
#projects a:hover { border-bottom: 0px; }

#lista-foto { width: 505px;  text-align: left; margin-top: 20px; clear: both; }
#lista-foto ul {list-style-type:none;margin:0;padding:0 0 0 5px; clear:both;}
#lista-foto li { float:left; width: 525px; padding:0; text-align:center; margin-right: 30px; margin-bottom: 10px; }
#lista-foto li a img, #lista-foto li.main a img { margin: 0 0 2px 0; border: 0; display: block; padding: 4px; border: 1px #393939 solid;}
#lista-foto li a img:hover, #lista-foto li.main a img:hover  { border: 1px #07598E solid;  }
#lista-foto li a { display:block; width: 510px; height: 340px; font-weight:normal; color: #FFF; font-size:11px; font-family: "Trebuchet MS", Verdana; font-size: 12px; text-decoration: none; padding:  0; margin-left: 0px;  border-bottom: 0px;  opacity:0.5; filter:alpha(opacity=50); }
#lista-foto li a:hover, #lista-foto li.main a:hover { color: #F2F2F2;opacity:1;filter:alpha(opacity=100); }

#lista-foto li.main { float:left; width: 135px; padding:0; text-align:center; margin-right: 30px; margin-bottom: 10px; }
#lista-foto li.main a { display:block; width: 141px; height: 150px; font-weight:normal; color: #FFF; font-size:11px; font-family: "Trebuchet MS", Verdana; font-size: 12px; text-decoration: none; padding: 0; border-bottom: 0px;  opacity:0.5; filter:alpha(opacity=50); }

#categories {  width: 265px; color: #919191; font-size: 12px; text-align: left; background: url(img/bg-resume.jpg) no-repeat top #000; float: right; }
#categories a { color: #CFCFCF; text-decoration: none; border-bottom: 1px solid; }
#categories a:hover { border-bottom: 0px; }
#categories dl { clear: both; }f
#categories dt { color: #525252; width: 80px; margin: 10px 0px; }
#categories dd { color: #919191; width: 160px; margin: -30px 0px 5px 80px; border: 0px red solid; line-height: 22px; }
#categories h2 { background: url(img/2arrows.gif) no-repeat left; padding: 0px 0px 0px 20px; font-size: 12px; font-weight: normal; margin: 0px 0px 20px 0px; }
#categories ul {list-style-type:none;margin:0;padding:0 0 0 5px; clear:both;}
#categories li { float:left; width: 135px; padding:0; text-align:left; margin-right: 30px; margin-bottom: 10px; }
#categories li a { display:block; width: 141px; font-weight:normal; color: #919191; font-size:12px; font-family: "Trebuchet MS", Verdana; font-size: 12px; text-decoration: none; padding: 0 0px 0px 20px; ; border-bottom: 0px;  background: url(img/arrow-dark-gray.gif) left no-repeat; }
#categories li a:hover { color: #C8C8C8; background: url(img/arrow-light-gray.gif) left no-repeat; }
#categories li a.current { color: #C8C8C8; background: url(img/arrow-light-gray.gif) left no-repeat; }

#project {  width: 555px; color: #919191; font-size: 12px; text-align: left; background: url(img/bg-intro.jpg) no-repeat top #000; float: left; }
#project h2 { background: url(img/2arrows.gif) no-repeat left; padding: 0px 0px 0px 20px; font-size: 12px; font-weight: normal; margin: 0px 0px 20px 0px; }
#project #foto { margin: 0 auto; text-align: left; }
#project #foto img { padding: 4px; border: 1px #07598E solid; margin: 0 auto; }

#project .back { background: url(img/2arrows2.gif) no-repeat left; width: 200px; float: left; margin: 5px 0; }
#project .back a { font-size: 12px; font-weight: normal; color: #CFCFCF; text-decoration: none; margin: 0px 0px 0px 15px; border-bottom: 1px solid; }
#project .back a:hover { border-bottom: 0px; }

#project .visit { background: url(img/2arrows.gif) no-repeat right; width: 200px; float: right; text-align: right; margin: 5px 0; }
#project .visit a { font-size: 12px; font-weight: normal; color: #CFCFCF; text-decoration: none; margin: 0px 15px 0px 0px; border-bottom: 1px solid; }
#project .visit a:hover { border-bottom: 0px; }


#resume { width: 265px; color: #919191; font-size: 12px; text-align: left; background: url(img/bg-resume.jpg) no-repeat top #000; float: right; }
#resume h2 { background: url(img/2arrows.gif) no-repeat left; padding: 0px 0px 0px 20px; font-size: 12px; font-weight: normal; margin: 0px 0px 20px 0px; }
#resume a { color: #CFCFCF; text-decoration: none; border-bottom: 1px solid; }
#resume a:hover { border-bottom: 0px; }
#resume dl { clear: both; }
#resume dt { color: #525252; width: 80px; margin: 10px 0px; }
#resume dd { color: #919191; width: 160px; margin: -30px 0px 5px 80px; border: 0px red solid; line-height: 22px; }

#contact-area { width: 555px; color: #919191; font-size: 12px; text-align: left;}
#contact-area input, #contact-area textarea { color: #CCC; background: #525252; padding: 3px; width: 371px; font-family: Verdana, sans-serif; font-size: 12px; margin: 0px 0px 10px 0px; border: 1px solid #666; }
#contact-area textarea { height: 60px; }
#contact-area textarea:focus, #contact-area input:focus { border: 1px solid #CCC; }
#contact-area input.submit-button { width: 100px; float: right; margin-right: 166px; }
#contact-area label { float: left; text-align: right; margin-right: 15px; width: 70px; padding-top: 5px; font-size: 12px;}

#footer { padding: 25px 0;}
#footer #copy { color: #525252; font-size: 11px; font-family: Verdana; width: 300px; float: left;  }
#footer #footlinks { float: right; width: 375px; color: #007DD3; font-size: 11px; font-family: Verdana; text-align: right; }
#footer #footlinks a { color: #A0A0A0; font-size: 11px; font-family: Verdana; text-decoration: none; display: block; float: left; margin: 0 10px; }
#footer #footlinks a:hover { color: #C8C8C8; }
#footer #footlinks div.spacer { font-size: 12px; float: left; }