/****
	CSS RESET
	A gente zera tudo o que é medida que não vamos utilizar. 
	Essas medidas normalmente são medidas padrão do browser. E, geralmente, atrapalha a implementação da página.
	Por isso, zeramos essas medidas para colocar as medidas que o designer colocou no layout.
****/
* {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: Georgia;
	font-size: 11px;
}

body {background: url(../images/bg_quebrado.gif)}


/* ALL */
#all { width: 1024px; background: url(../images/pattern_grey.gif); float:left;}
#allPortfolio { width: 1024px; background: black; float:left; }

a img{ border: 0px; } 

.size12 { font-size:12px; }
.size14 { font-size:14px; }
.size16 { font-size:16px; }
.size60 { font-size:60px; }

.yellowFont{ color:#fff200; }
.whiteFont{  color:#ffffff; }

.italic { font-style:italic; }

h1{
	background: #fff200;
	color: #808285;
	float:left;

	font-style: italic;
	font-size:22px;
	font-weight:thin;
	
	padding:	   7px;
	padding-left:  10px;
	padding-right: 10px;

	margin-top:    20px;
}

h2{
	color: #FFFFFF;
	font-size: 60px;
	font-style:italic;
	font-weight:lighter;

	margin-bottom:10px;
}

/* HEADER */
#header {
	height: 178px;
}

#top_left {
	float:left;
	background: url(../images/novo_topo.jpg);
	width:  259px;
	height: 178px;
}

#top_left #languages{
	top:0px;
	float:right;
	cursor:pointer;
	position:absolute;
	left:209px;
}

#top_left .garn{ 
	float:left;
	position:absolute;
}

#top_content {
	float:left;
	width:725px;
	height:138px;
}

/* LEFT */
#left {
	float:left;
	background: #FFFFFF;
	width: 259px;
}

#left #description {
	padding:20px;
	color: #959283;
	font-size:11px;
}

#left #description a{
    font-size:14px;
    font-style:italic;
	color: #959283;
}

#left #description a.roxo {
    color:#823177;
}

/* MENU */
#menu {
	width: 100%;
	padding: 0; 
	margin: 0;
	font: 12px Verdana, sans-serif;
}


#menu .first {
	background: url(../images/menu_fundo.gif) no-repeat;
	height: 45px;
	padding-left:15px;

	display: block;
	line-height: 50px;
	
    color: #823177;
	font-size:12px;
	font-style:italic;
	font-weight:thin;
	
	cursor:pointer;
}

#menu a{
	background: url(../images/menu_fundo.gif) no-repeat;
	list-style: none;
	height: 45px;
	padding-left:15px;

	display: block;
	line-height: 13px;
	
	text-decoration:none;
	color: #808285;	
}

#menu a:visited { 
	background: url(../images/menu_fundo_visitado.gif) no-repeat;
}
#menu  a:hover { 
	background: url(../images/menu_fundo_selecionado.gif) no-repeat;
}
#menu a.selected {
	background: url(../images/menu_fundo_selecionado.gif) no-repeat;
}

/* CONTENT */
#content {
	float:left;
	width:725px;
	padding-left:20px;
	padding-right:20px;
    padding-bottom:20px;
}

/* FEATURED PROJECTS LIST */
#featuredProjects {
	width:100%;
	float:left;
}

#featuredProjects li{
	margin-top:20px;
	float:left;
	margin-right:43px;
}

#featuredProjects .featuredSelected{
    border:5px solid red;
}

#featuredProjects .last{
    float:right;
	margin-right:0px;
}

/* ABOUT */
cite.about { 
	color:#FFFFFF; 
	font-size:18px;
}

#about {
	float:left;
	margin-top:40px;
	width:100%;
}

#about #boxLeft{
	float:left;
	width:390px;
}

#about #boxRight {
	float:right;
	width:290px;
	font-style:italic;
}

#about #boxLeft cite{
	display:block;
	background:#fff200;
	color:#808285;
	padding:20px;
	font-size:11px;
	margin-top:-10px;
	
	text-align: justify;
	text-justify: auto;	
}

#about #boxLeft cite a {
	color:#808285;
	font-weight:bold;
}

#about #boxLeft p{
	margin-top:20px;
	color:#FFFFFF;
}

#about #boxRight .whiteBlock{
	background:#FFFFFF;
	padding:10px;
}

/* COPYLEFT */
#copyLeft p{
	margin-top:20px;
	color:white;
	font-size:15px;
	font-style:italic;
	line-height:140%;
}

#copyLeft cite{
	display:block;
	color:white;
	margin-top:20px;
}

#copyLeft .yellowBlock{
	background:#fff200;;
	width:490px;
	padding:20px;
	margin-top:20px;
}

#copyLeft .yellowBlock p{
	color:#808285;
	font-style:italic;
	font-size:12px;
}

#copyLeft .yellowBlock h3{
	color:#808285;
	font-weight:normal;
	font-style:italic;
}

/* PORTFOLIO */
#portfolioHeader {
    float: left;
	width: 765px;
	background: url(../images/portfolio_top.gif);
}
#portfolioHeader .titulo{
    float: left;
    color: #000000;
    background:#fff200;
    width:300px;
    font-style:italic;
    font-weight:thin;
    font-size:20px;
    text-align:left;
    padding:5px;
    padding-left:22px;
}

#portfolioHeader .desc{
    float:left;
    background:black url(../images/bg_descript_box.jpg) no-repeat;
	height:144px;
	width:100%;
}

#portfolioHeader .subtitulo{
    width:100%;
    padding:10px;
    float: left;
    color: #fff200;

    font-style:italic;
    font-weight:thin;
    font-size:16px;
    text-align:left;
    padding:5px;
    padding-left:10px;
    
    margin-top:14px;
    margin-left:14px;    
}

#portfolioHeader .descOne{
    float:left;
    width:30%;
    padding:10px;
    color:#cecdc7;
    margin-left:14px;
}


#portfolioHeader .descTwo{
    float:left;
    width:60%;
    padding:10px;
    color:#cecdc7;
}

a.pracima{
    display:block;
    width:62px;
    font-size:13px;
    background:#fff200;
    padding:10px 15px 10px 15px;
    margin-top:20px;
    text-decoration:none;
    text-align:center;
 	color: #808285;
 	font-style:italic;
}

/* CONTENT Portfolio */
#descriptionPortfolio {
	padding:0px;
	margin-left:-20px;
	line-height: 0px;
}

/* FOOTER */
#linkFooter{
    padding:30px;
    padding-left:15px;
	color: #808285;
	font-size:9px;
}

#linkFooter a{
    font-style:italic;
    font-weight:bold;
	font-size:9px;
	color: #808285;
}

/* ABOUT */
#formAbout{
    margin-top:110px;
}

#formAbout input{
    padding:10px;
    display:block;
    margin-top:8px;
    width:80%;
    color: #808285;
    font-style:italic;
}

#formAbout textarea{
    padding:10px;
    height:80px;
    display:block;
    margin-top:8px;
    width:80%;
    color: #808285;
    font-style:italic;
}

#formAbout .submit{
    background:#fff200;
    color: #808285;
    font-style:italic;
    width:60px;
    border:0px;
    cursor:pointer;
}