/*

CSS layout produzido por:
Pedro Putz - www.putzdesign.net

*/

/* Seletor Geral e Tags HTML
-------------------------------------------------------------------------------------------*/
* { color: #ffffff; font: 11px/13px verdana, arial; list-style: none; margin: 0 0 0 0; padding: 0 0 0 0; }
body { background: url(../images/bg_topo.gif) no-repeat fixed 0 0; }
div { position: relative; }
html { background: #ffffff url(../images/bg_textura.gif) fixed; }
img { border: 0; }
h2 { font: bold 16px/20px verdana, arial; margin: 0 0 0 0; }
h3 { color: #333333; font: bold 14px/17px verdana, arial; margin: 0 0 8px 0; }
h4 { color: #eeeeee; font: normal 10px/12px verdana, arial; margin: 0 0 10px 0; }
p { margin: 0 0 3px; }
p.pCenter { color: #666666; text-align: center; }
p.pErro { background-color: #cccccc; border: 1px dashed #666666; display: block; padding: 3px 5px; width: 508px; }

.clear { clear: both; height: 1px; }

a { color: #ed1c24; text-decoration: none; }
a:hover, a:active { background-color: #ed1c24; color: #ffffff; }

/* Divs
--------------------------------------------------------------------------------------------*/
#divCenter { margin: 0 auto; width: 960px; }
#divFooter { background: url(../images/bg_footer.png) no-repeat 0 0; clear: both; padding: 20px 30px 0 30px; width: 900px; }
#divHeader { height: 180px; width: 960px; }

/* Lista de trabalhos
--------------------------------------------------------------------------------------------*/
#ulWorks li { border: 3px solid #cccccc; height: 272px; float: left; margin: 0 0 30px 30px; position: relative; width: 272px; }
#ulWorks li a:hover,
#ulWorks li a:active { background-color: transparent; }
#ulWorks li div { background: #ed1c24; bottom: 0px; left: 0; padding: 10px; position: absolute; width: 252px; z-index: 100; }
#ulWorks li div a { color: #ffffff; display: block; margin: 7px 0 0 0; text-decoration: none; }
#ulWorks li div a:hover,
#ulWorks li div a:active { text-decoration: underline; }
			
/* Lista footer
--------------------------------------------------------------------------------------------*/
#ulFooter { background: #efefef url(../images/bg_footer.gif) no-repeat 0 0; display: block; padding: 30px 0; width: 900px; }
#ulFooter li h2 { margin: 0 0 10px 0; }
#ulFooter .liSingle { width: 260px; }
#ulFooter .liDouble { width: 550px; }
#ulFooter .liSingle,
#ulFooter .liDouble { float: left; margin: 0 0 20px 30px; }
#ulFooter .liSingle p,
#ulFooter .liDouble p { color: #333333; line-height: 16px; margin: 0 0 8px 0; }
#ulFooter .liSingle p strong,
#ulFooter .liDouble p strong { color: #333333; font-weight: bold; }

/* Lista de experiência e icones
--------------------------------------------------------------------------------------------*/
#ulIcos li { float: left; height: 32px; margin: 0 10px 0 0; width: 32px; }
#ulIcos li a { display: block; height: 32px; width: 32px; }
#ulIcos li a:hover,
#ulIcos li a:active { background-color: #cccccc; }
#ulExperiencia li { float: left; height: 18px; margin: 0 0 10px 0; width: 130px; }

/* Lista de amigos
--------------------------------------------------------------------------------------------*/
#ulAmigos li { margin: 0 0 5px 0; }

/* Form contato
--------------------------------------------------------------------------------------------*/
form fieldset { border: none; float: left; margin: 0 20px 20px 0; width: 250px; }
form label { color: #333333; }
form label input,
form label textarea { border: 1px solid #cccccc; color: #333333; display: block; margin: 0 0 10px 0; padding: 5px; width: 240px; }
form #submit { background: #999999; border: 1px solid #666666; color: #333333; float: right; padding: 5px; }

/* Image Replacement
--------------------------------------------------------------------------------------------*/
.imgReplace { background: no-repeat; display: block; overflow: hidden; text-indent: -5000px; }

.logo a { background: url(../images/logoPutzdesign.gif); display: block; margin: 88px 0 0 30px; height: 54px; width: 279px;	}
.titAmigos { background: url(../images/titles.gif) no-repeat 0 -40px; height: 18px; width: 66px; }
.titContato { background: url(../images/titles.gif); height: 18px; width: 75px; }
.titExperiencia { background: url(../images/titles.gif) no-repeat 0 -117px; height: 22px; margin: -3px 0 10px 0; width: 113px; }
.titPedroputz { background: url(../images/titles.gif) no-repeat 0 -79px; height: 18px; width: 106px; }