/* CSS Document
   Autor: Andre Amaral
   Tema: Copa
   Versao: 3
   Data: Junho, 2010
*/

body { color:#eee; background:#111; font-size:80%; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
header, section, footer, article, nav { display: block}
* { margin:0; padding:0}
ul, ol { list-style-position:outside}
ul li, ol li { text-indent:0}
fieldset, img { border:0 none}
h1,h2, h3 { font-weight:normal; letter-spacing:2px; text-shadow:1px 1px 1px #000000}

/* header */
header { width:960px; height:134px; margin:0 auto}
header .logo { padding-top:28px; float:left}

section { width:960px; margin:0 auto; overflow:hidden}
section h1 { text-shadow:1px 1px 1px #000; color:#FEB600; font-family:Georgia; font-size:24px; line-height:28px; margin:10px 0; display:inline; padding:2px 4px}
.lasted_project { margin-bottom:30px}
.banner { -webkit-transition: background 0.3s linear; background-color:#151515; padding:19px; float:left; clear:both; text-align:center; border:1px solid #222; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}
.banner:hover, .banner:hover h1, .banner:focus, .banner:focus h1 { background:#FEB600}
.banner h1 { -webkit-transition: background 0.3s linear; background-color:#151515; font-family:Arial, Helvetica; color:#FFF; font-weight:bold; font-style:italic; padding:3px 8px; float:left; margin:0 0 -30px 0; position:relative}

/* Menu */
.menu { float:right; padding-top:60px}
.header-elements .menu { padding-top:5px}
.menu li { float:left; list-style:none; padding-left:10px}
.menu a { -webkit-transition: background 0.3s linear; cursor:pointer; font-size:14px; font-style:italic; font-weight:bold; color:#fff; text-decoration:none; padding:2px 3px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}
.menu a:hover, .menu a:focus, .menu li.active a { background-color:#FEB600; color:#000}

/* Sobre */
.about article { color:#D9D9D9; width:660px; margin:0; float:right}
.about h2, .about article h1 { display:block; font-family:Georgia; font-size:24px; letter-spacing:2px; line-height:28px; margin-bottom:18px}
.about article h1 { line-height:normal; margin-top:0; padding:0 0 0 10px}
.about p { color:#D9D9D9; display:block; font-size:14px; line-height:22px; padding-bottom:10px}
.about p strong { color:#EEE; font-family:Georgia; font-size:15px}
aside { float:left}
aside h3 {color:#EEE; font-family:Georgia; font-weight:bold; font-size:15px; line-height:20px; padding:10px 0 5px 0}
.conhecimentos { padding:10px 0 10px 5px}
.conhecimentos li { list-style:none; margin-bottom:10px; background-color:#151515; width:266px; height:22px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}
.conhecimentos em { color:#000; line-height:20px; padding-left:5px; background-color:#FEB600; float:left; font-style:normal; height:22px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px}

.about .grid1 li { padding:5px 20px; line-height:20px; list-style:decimal inside}
.about article a { color:#4B8F2C; text-decoration:none}
.about article a:hover { border-bottom:2px solid}
.about .grid, .about .grid1 { background:#151515; width:auto; margin:30px 0 0 0; padding:10px; float:left}
.about .grid { margin-top:0}
	
.social { padding:0 0 10px 0}
.social li { width:271px; list-style:none}
.social li a { -webkit-transition: background 0.3s linear; display:block; color:#EEE; line-height:30px; font-size:14px; font-style:italic; text-decoration:none; height:30px; border-bottom:1px solid #151515; padding-left:30px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}
.social li a:hover { background-color:#000; color:#FEB600}
.social .lastfm a { background: url('../img/lastFm.png') no-repeat 5px center}
.social .blog a { background:url('../img/blog.png') no-repeat 5px center}
.social .orkut a { background:url('../img/orkut.png') no-repeat 5px center}
.social .twitter a { background:url('../img/twitter.png') no-repeat 5px center}
.social .flickr a { background:url('../img/flickr.png') no-repeat 5px center}
.social .facebook a { background:url('../img/facebook.png') no-repeat 5px center}
.social .skoob a { background:url('../img/skoob.png') no-repeat 5px center}
.social .linked_in a { background:url('../img/linked_in.png') no-repeat 5px center}

/* portfolio */
.portfolio { clear:both; padding:30px 0; margin-top:30px; border-top:1px solid #151515}
.header-elements { height:auto; padding-bottom:30px}
.portfolio figure { -webkit-transition: background 0.3s linear; background:#151515; width:290px; min-height:166px; float:left; padding:5px; margin:0 20px 20px 0}
.portfolio figure:hover { background:#FEB600; -webkit-transform: rotate(360deg);}
.portfolio figure:hover details, .portfolio figure:hover h2 { color:#000; text-shadow:none}
.portfolio figure a { text-align:center; overflow:hidden; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px}
.elements { width:990px; overflow:hidden}
.portfolio h2 { font-size:18px; font-family:Georgia; margin:0 0 15px 0}
details { color:#9B9393}

#Links { width:990px}
#Links  .header-elements { width:990px}

/* Contato */
#contato { background-color:#000; border:15px solid #222; width:850px; padding:15px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}
#contato fieldset { width:315px; margin:20px 10px 20px 20px; float:right}
#contato li { height:25px; margin:0 0 15px 0; list-style:none}
#contato label { color:#fff; font-size:15px; padding-right:10px; font-style:italic; font-weight:bold; float:left; width:100px; text-align:right}
#contato .text_contact { width:278px; float:left; margin:-5px 0 0 10px}
#contato .text_contact p { color:#DFDFDF}
#contato .im { padding:10px 0 0 5px; color:#39C}
#contato .im li { padding:0 0 2px 8px}
#contato .im li span { display:block; font-weight:bold; font-size:12px; color:#FFF; letter-spacing:1px; margin-left:-10px}
#contato .txtfield { padding:3px; float:left; border:0 none; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px}
#contato textarea.txtfield { width:198px; height:50px;}
#contato .enviar { background:url('../img/sprites_bt_enviar.png'); line-height:0; font-size:0; text-indent:-9999px; width:205px; height:25px; float:right; margin-top:7px; cursor:pointer; border:0 none}
#contato .enviar:hover { background:url('../img/sprites_bt_enviar.png') left -26px no-repeat}
#contato .fechar { background-color:#FEB600; cursor:pointer; font-size:15px; font-weight:bold; padding:3px 9px; position:absolute;	right:-5px; top:-12px; -moz-border-radius:10px; -webkit-border-radius:5px; border-radius:5px; color:#000}

/* Amigos */
.box { background-color:#151515; float:left; margin:0 20px 20px 0; padding:10px; width:290px}
footer h2 { color:#FEB600; font-family:Georgia; font-size:18px; margin:0 0 15px 0}
footer h3 { font-size:15px; float:left; width:290px; margin:15px 0 0 0}
footer li { list-style:none}
footer .box li a { -webkit-transition: background 0.3s linear; border-bottom:2px solid #111; color:#4B8F2C; display:block; font-size:13px; height:30px; line-height:30px; text-decoration:none}
footer li a:hover,footer #favorites li a:hover, footer li a:focus { background:#000}
footer #favorites li a, .meus_links a { padding:10px 0; border-bottom:2px solid #111; height:auto; line-height:normal}
footer #favorites li, .meus_links li { display:block; font-size:13px; height:auto; line-height:12px; text-decoration:none}
footer li .tags { font-size:11px; display:block; color:#9B9393; line-height:18px}
footer .meus_links li a { line-height:normal}
#friends ul { width:140px; margin-right:10px; float:left}
#friends ul.last { margin-right:0}
.conect_friend { width:290px; border:1px solid #151515}


/* rodape */
footer { margin:0 auto; width:990px; overflow:hidden; padding-top:30px; border-top:1px solid #151515}
footer nav { display:inline }
footer .end { color:#9B9393; font-size:11px; padding-top:10px; height:60px; margin-top:30px; float:left; width:960px; clear:both; border-top:1px solid #151515}
#top { cursor:pointer; font-size:11px; color:#9B9393; position:fixed; bottom:0; right:7px}

.vcard { font-style:normal; padding-top:7px;}
.vcard .tags { display:block; text-indent:-999px; }
.vcard a {color:#4B8F2C; text-decoration:none}

/* MODAL */
.load { position: absolute; top: 50%; left: 50%; width: 88px; height: 78px; margin: -39px 0 0 -44px; z-index: 99999}
.bg_modal { position: absolute; top: 0; left: 0; z-index: 99998}
.view_modal { position: absolute; left: 50%; top: 50%; text-align: left; z-index: 99998}
.modal { visibility: hidden; cursor:pointer}

/* Portrait */
@media all and (orientation:portrait)
{
	section, #Inicio, footer, .about article, footer .end, .elements  { padding-left:10px; width:auto}
	.about .header-elements { padding-top:30px}
	#Inicio { text-align:center}
	#Inicio .menu { width:250px; display:block; float:none; padding:10px 0 0 25px; }
	header .logo  { display:block; float:none; margin:0 auto; padding-top:28px; width:285px}
	article img, .banner { display:none}
}
/* Landscape */
/*@media all and (min-width: 321px)
{
	section { width:960px}
}*/