/************************************************************************
*   
*   S T Y L E   C S S - #P O R T F O L I O - 2 0 1 0
*   
*   Author:  Wallace Erick
*   Date:    05 Feb 2010
*   Web:     http://www.wallaceerick.com.br/
*   Email:   contato@wallaceerick.com.br
*
*************************************************************************/

body { 
	font:normal 12px Verdana, Geneva, sans-serif;
	background:#000 url('../images/bgBody.jpg') top center repeat;
	color:#fff;
}

/*-----------------------------------------------------------------------
Header
------------------------------------------------------------------------*/

#header {
	width:960px;
	height:200px;
	margin:0 auto;
	background: url('../images/bgHeader.png') top center no-repeat;
}

#header h1 a {
	width:365px;
	height:80px;
	background: url('../images/wallaceerick.png') top center no-repeat;
	margin:55px 0 0 50px;
	position:absolute;
	text-indent:-9999px;
}

#header h2 {
	width:460px;
	height:80px;
	background: url('../images/slogan.png')top center no-repeat;
	margin:55px 0 0 440px;
	position:absolute;
	text-indent:-9999px;
}

/*-----------------------------------------------------------------------
Content
------------------------------------------------------------------------*/

#content {
	width:960px;
	height:auto;
	margin:0 auto;
}

#content hr {
	width:750px;
	height:1px;
	background:url('../images/bgHr.png') 0 0 no-repeat;
	margin:15px auto;
	border:none;
	clear:both;
}

#content h3, #content h3 a {
	color:#ff0088;
	font-size:14px;
	text-decoration:none;
	padding:20px 0 15px 12px;
}

#content h3 a:hover {
	text-decoration:underline;
}

#content .section {
	width:100%;
	height:auto;
	position:relative;
}

#content ul#projects li .item {
	width:845px;
	height:185px;
	background: url('../images/bgItem.png') 0 0 no-repeat;
	margin:0 auto;
	position:relative;
	clear:both;
}

#content ul#projects li .item .description {
	width:350px;
	height:185px;
	float:left;
}

#content ul#projects li .item .description dl {
	padding:0 0 0 25px;
}

#content ul#projects li .item .description dt {
	width:125px;
	height:20px;
	color:#fff;
	text-transform:uppercase;
	float:left;
	font-size:11px;
	padding:0 0 0 10px;
	background:url('../images/arrow.png') 0 5px no-repeat;
}

#content ul#projects li .item .description dd {
	color:#84878D;
	font:normal 11px Verdana,Geneva,sans-serif;
	height:20px;
}

#content ul#projects li .item .description dd.offline {
	color:#ff0000;
	background:url('../images/bgStatus.png') 175px 0 no-repeat;
}

#content ul#projects li .item .description dd.online {
	color:#009900;
	background: url('../images/bgStatus.png') 175px -16px no-repeat;
}

#content ul#projects li .item .highslide-gallery {
	width:495px;
	height:170px;
	float:left;
	text-align:center;
	margin:15px 0 0 0;
}

#content ul.options {
	width:865px;
	height:25px;
	clear:both;
	margin:170px 0 0 -855px!important;
	position:absolute;
	display:inline;
}

#content ul.options li {
	display:inline;
}

#content ul.options a {
	display:block;
	float:left;
	width:25px;
	height:25px;
	text-indent:-9999px
}

#content ul.options a.next {
	background:url('../images/btNext.png') 0 0 no-repeat;
}

#content ul.options a.previous {
	background:url('../images/btPrev.png') 0 0 no-repeat;
}

#content ul.options a.more {
	background:url('../images/btMore.png') 0 0 no-repeat;
	margin:0 0 0 790px;
}

#content ul.options a.next:hover, #content ul.options a.previous:hover, #content ul.options a.more:hover {
	background-position:0 -25px;
}

#content .segment {
	width:845px;
	height:auto;
	margin:0 auto;
	padding:0 0 15px 0;
	background: #101011;
}

#content .segmentTop {
	width:845px;
	height:15px;
	margin:0 auto;
	background: url('../images/segmentTop.png') top center no-repeat;
	clear:both;
}

#content .segmentBottom {
	width:845px;
	height:15px;
	margin:0 auto;
	background: url('../images/segmentBottom.png') bottom center no-repeat;
	clear:both;
}

#content .segment .photo {
	width:220px;
	height:auto;
	float:left;
	padding:32px 0 0 20px;
}

#content .segment .professional {
	width:285px;
	height:auto;
	float:left;
	background:url('../images/bgItens.png') 285px 20px no-repeat;
	padding:10px 0 0 10px;
}

#content .segment .professional a {
	color:#84878D;
	text-decoration:none;
}

#content .segment .professional a:hover {
	color:#ff0088;
	text-decoration:none;
}

#content .segment .personal {
	width:290px;
	height:auto;
	float:left;
	padding:10px 0 0 20px;
}

#content div.professional h3, #content div.personal h3, #content .segment .favorites h3, #content .segment .inspiration h3, #content .segment .partners h3, #content .segment .communities h3 {
	background:url('../images/arrow-big.png') 0 5px no-repeat;
	padding:0 0 0 15px;
	margin:15px 0;
}

#content div.professional p, #content div.personal p, #content .segment .favorites p, #content .segment .inspiration p, #content .segment .partners p, #content .segment .communities p {
	width:90%;
	font-size:11px;
	color:#84878D;
}

#content .segment .personal a, #content .segment .professional a {
	background:url('../images/photo.png') 0 0 no-repeat;
	color:#84878D;
	text-decoration:none;
	text-indent:-9999px;
	display:block;
	margin:10px 0;
	width:20px;
	height:16px;
}

#content .segment .personal a:hover, #content .segment .professional a:hover {
	background:url('../images/photo.png') 0 -16px no-repeat;
	color:#ff0088;
	text-decoration:none;
}

#content .segment .favorites, #content .segment .inspiration, #content .segment .partners, #content .segment .communities {
	width:180px;
	height:auto;
	float:left;
	margin:0 5px 0 25px;
	background:url('../images/bgItens.png') right center no-repeat;
	padding:10px 0 0 0;
}

#content div.profesional p span, #content div.personal p span {
	color:#ff0088;
}

#content div.profesional p strong, #content div.personal p strong {
	font-weight:bold;
	font-size:11px;
}

#content .segment .form {
	width:480px;
	display:block;
	float:left;
	margin:0 0 0 25px;
	padding:25px 0 0 ;
}

#content .segment .form input.optional, #content .segment .form textarea {
	width:360px;
	height:25px;
	font:normal 14px Verdana, Geneva, sans-serif;
	border:1px solid #000;
	background:url('../images/bgInput.png') 0 0 no-repeat;
	padding:3px 0  0 5px;
	display:block;
}

#content .segment .form input#enviar {
	margin:15px 0 10px 355px;
}

#content .segment p {
	font:normal 11px Verdana, Geneva, sans-serif;
	clear:both;
}

#content .segment p span, #content .segment label span {
	color:#ff0088;
}

#content .segment .form textarea {
	height:130px;
	background:url('../images/bgTextarea.png') -1px -1px no-repeat;
}

#content .segment .form label {
	width:80px;
	line-height:22px;
	text-align:right;
	margin:5px 5px 5px 0;
	display:block;
	font-size:11px;
	float:left;
}

#content .segment .form input.optional:hover, #content .segment .form textarea:hover {
	border:1px solid #fff;
	color:#fff;
}

#content .segment .form input.optional:focus, #content .segment .form textarea:focus {
	border:1px solid #ff0066;
	color:#ff0066;
}

#content .segment .last {
	background:none;
}

#content .segment ul.itens {
	margin:10px 0 0 0;
}

#content .segment ul.itens li {
	display:block;
	margin:10px 0;
}

#content .segment ul.itens a {
	background:url('../images/arrow2.gif') 0 5px no-repeat;
	padding:0 0 0 15px;
	color:#fff;
	text-decoration:none;
	font-size:11px;
}

#content .segment ul.itens a:hover {
	color:#84878D;
}

#content .segment .questions {
	display:block;
	float:left;
	margin: 0;
	padding:0 10px 0 0;
	width:320px;
	height:310px;
	background: url('../images/bgItens.png') center right no-repeat;
}

#content .segment ul#questions {
	width:280px;
	height:130px;
	background: url('../images/bottom.png') left bottom no-repeat;
	padding:10px 0 0 25px;
}

#content .segment ul#questions li {
	margin:10px 0;
	font:normal 11px Verdana, Geneva, sans-serif;
	background:url('../images/arrow2.gif') 0 5px no-repeat;
	padding:0 0 0 15px;
	width:95%;
}

#content .segment .questions ul#contacts {
	width:100%;
	height:55px;
	background:url('../images/bottom.png') left bottom no-repeat;
	padding:15px 0 0 25px;
}

#content .segment .questions ul#contacts li h3 {
	margin:0;
	padding:0 0 0 15px;
	background:url('../images/arrow-big.png') 0 5px no-repeat;
}

#content .segment .questions ul#contacts li a {
	color:#fff;
	text-decoration:none;
	font-size:11px;
	padding:0 0 0 15px;
	background:url('../images/arrow2.gif') 0 5px no-repeat;
}
#content .segment .questions ul#contacts li a:hover {
	text-decoration:underline;
}

#content .segment .questions ul#icons {
	width:100%;
	height:150px;
	padding:30px 0 0 25px;
}

#content .segment .questions ul#icons li a {
	width:120px;
	height:30px;
	line-height:30px;
	padding:0 0 0 35px;
	display:block;
	float:left;
	background:url('../images/icons.png') 0 0 no-repeat;
	color:#fff;
	text-decoration:none;
	font-size:11px;
}

#content .segment .questions ul#icons li a:hover {
	background-position: 30px 0;
	text-decoration:underline;
}

#content .segment .questions ul#icons li a.msn {
	background-position:0 0;
}

#content .segment .questions ul#icons li a.skype {
	background-position:0 -30px;
}

#content .segment .questions ul#icons li a.gmail {
	background-position:0 -60px;
}

#content .segment .questions ul#icons li a.flickr {
	background-position:0 -90px;
}

#content .segment .questions ul#icons li a.twitter {
	background-position:0 -120px;
}

#content .segment .questions ul#icons li a.wordpress {
	background-position:0 -150px;
}

#content .segment .questions ul#icons li a.rss {
	background-position:0 -180px;
}

#content .segment .questions ul#icons li a.youtube {
	background-position:0 -210px;
}

#content .segment .questions ul#icons li a.facebook {
	background-position:0 -240px;
}

/*-----------------------------------------------------------------------
Navigation
------------------------------------------------------------------------*/

ul.navigation {
	width:845px;
	height:46px;
	background:url('../images/bgMenu.png') 0 0 no-repeat;
	margin:0 auto;
}

ul.navigation li{
	display:inline;
	margin:0 0px;
}

ul.navigation li h2 {
	display:block;
	float:left;
	width:410px;
	height:46px;
	text-indent:-9999px;
}

ul.navigation li h2.portfolio {
	background:url('../images/h2Portfolio.png') 20px 8px no-repeat;
}

ul.navigation li h2.aboutme {
	background:url('../images/h2About.png') 20px 8px no-repeat;
}

ul.navigation li h2.resources {
	background:url('../images/h2Resources.png') 20px 8px no-repeat;
}

ul.navigation li h2.blog {
	background:url('../images/h2Blog.png') 20px 8px no-repeat;
}

ul.navigation li h2.contact {
	background:url('../images/h2Contact.png') 20px 8px no-repeat;
}

ul.navigation li a {
	height:46px;
	display:inline-block;
	float:left;
	background:url('../images/bgMenu.gif') 0 0 no-repeat;
	text-indent:-9999px;
}

ul.navigation li a.portfolio {
	background-position:0 0;
	width:76px;
}

ul.navigation li a.aboutme {
	background-position:-76px 0;
	width:80px;
}

ul.navigation li a.resources {
	background-position:-156px 0;
	width:98px;
}

ul.navigation li a.blog {
	background-position:-254px 0;
	width:70px;
}

ul.navigation li a.contact {
	background-position:-324px 0;
	width:72px;
}

ul.navigation li a.portfolio:hover {
	background-position:0 -46px;
}

ul.navigation li a.aboutme:hover {
	background-position:-76px -46px;
}

ul.navigation li a.resources:hover {
	background-position:-156px -46px;
}

ul.navigation li a.blog:hover {
	background-position:-254px -46px;
}

ul.navigation li a.contact:hover {
	background-position:-324px -46px;
}

ul.navigation li a.portfolio-ativo, ul.navigation li a.portfolio-ativo:hover {
	background-position:0 -92px;
}

ul.navigation li a.aboutme-ativo, ul.navigation li a.aboutme-ativo:hover {
	background-position:-76px -92px;
}

ul.navigation li a.resources-ativo, ul.navigation li a.resources-ativo:hover {
	background-position:-156px -92px;
}

ul.navigation li a.blog-ativo, ul.navigation li a.blog-ativo:hover {
	background-position:-254px -92px;
}

ul.navigation li a.contact-ativo, ul.navigation li a.contact-ativo:hover {
	background-position:-324px -92px;
}

ul.navigation li a span {
	background: url('../images/highlight.png') 0 0 no-repeat;
	width:125px;
	height:65px;
	display:block;
	position:absolute;
}

ul.navigation li a span.portfolio {
	margin:10px 0 0 -30px;
}

ul.navigation li a span.aboutme {
	margin:10px 0 0 -20px;
}

ul.navigation li a span.resources {
	margin:10px 0 0 -10px;
}

ul.navigation li a span.blog {
	margin:10px 0 0 -25px;
}

ul.navigation li a span.contact {
	margin:10px 0 0 -15px;
}

/*-----------------------------------------------------------------------
Footer
------------------------------------------------------------------------*/

#footer {
	width:845px;
	height:50px;
	margin:0 auto;
	padding:10px 0 0 0;
}

#footer p {
	width:40%;
	float:right;
	text-align:right;
	font-size:11px;
}

#footer ul {
	width:60%;
	float:left;
	text-align:left;
}

#footer ul li {
	display:inline;
	margin:0 10px 0 0;
	border-right: 1px solid #fff;
	padding:0 10px 0 0;
}

#footer ul li.last {
	border:none;
}

#footer a {
	color:#fff;
	text-decoration:none;
	font-size:11px;
}

#footer a:hover {
	color:#ff0088;
}

/*-----------------------------------------------------------------------
Star Rating
------------------------------------------------------------------------*/

ul.rating {
	background:url('../images/star.gif') bottom;
	height:21px;
	width:115px;
	overflow:hidden;
	margin:10px 0 0 25px;
}

ul.rating li {
	display:inline
}

.rating a {
	display:block;
	width:23px;
	height:21px;
	float:left;
	text-indent:-9999px;
	position:relative;
}

.rating a:hover {
	background:url('../images/star.gif') center;
	width:115px;
	margin-left:-92px;
	position:static;
}

.rating a:active {
	background-position:top;
}

.clearfix {
	clear:both;
}

.keyphrases {
	display:none;
}

.loading {
	background:#101011 url('../images/load-projects.gif') center center no-repeat;
	display:block;
}

img.error {
	margin:10px 0 0 30px;
}