/*
iGoR Pimentel - Desenvolvimento Web

Project:      Portfolio 2009
Version:	    1.0
Last change:	10/02/09
*/

/*
RESET CSS
****/
@import "reset_reloaded.css";
/*
PADRÃO
*****/
body {
    line-height: 1.5em;
	font-family: "Trebuchet MS", Arial, Helvetica, Verdana, sans-serif;
	font-size: 12px;
	color: #333;
	background-color: #004080;
}

.oculto {
    display:none;
}

a {
    font-weight:bold;
    color: #0068BE;
    text-decoration:underline;
}
a:hover {
    color: #0068BE;
    text-decoration:none;
}

#screenshot{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	text-align:center;
}

input.form-text {
    width:255px;
    padding:17px 10px;
    font-family: "Trebuchet MS", Arial, Helvetica, Verdana, sans-serif;
    font-size:11px;
    font-weight:bold;
    color:#333;
    border:0;
    background:#FFF url(images/form_text.gif) no-repeat;
}
textarea.form-textarea {
    width:255px;
    height:80px;
    padding:10px;
    font-family: "Trebuchet MS", Arial, Helvetica, Verdana, sans-serif;
    font-size:11px;
    font-weight:bold;
    color:#333;
    border:0;
    background:#FFF url(images/form_textarea.gif) no-repeat;
}
input.form-butsend {
    float:left;
    width:80px;
    height:40px;
    border:0;
    text-indent:-8000px;
    background:#FFF url(images/form_butsend.gif) no-repeat;
}

div.line {
    display:table;
    clear:both;
    width:290px;
    height:6px;
    background:#FFF url(images/line.gif) no-repeat;
}

div.clearfix {
    overflow:hidden;
    clear:both;
    width:290px;
    height:3px;
}

.error {
    color: #FF0000;
}
/*
WRAPPER
*****/
#wrapper {
    display:table;
    width: 100%;
    margin: 0 auto;
    background: #004080 url(images/bg.png) top center no-repeat;
}
/*
HEADER
*****/
#header {
    display:table;
    width: 100%;
    height: 160px;
    margin: 55px auto 10px;
    background: transparent url(images/header_bg.png) repeat-x;
}
#header #logo {
    width: 295px;
    height: 140px;
    margin: 10px auto 0;
}
#header #logo h1 {
	background: transparent url(images/logo.gif) no-repeat;
}
#header #logo h1 a {
	display: block;
    width: 295px;
    height: 140px;
    text-indent:-8000px;
}
#header #dragme {
    cursor:move;
    position:relative;
    top:-141px;
    left:122px;
    width: 30px;
    height: 30px;
    background: transparent url(images/logo_ponto.png) no-repeat;
}
/*
CONTENT
*****/
#content {
    width: 780px;
    height: 570px;
    margin: 0 auto;
    background:transparent url(images/content_bg.png) no-repeat;
}
#content h2 {
    position:relative;
    display:table;
    clear:both;
    width:300px;
    height:55px;
    text-indent:-8000px;
}
#content #leftcolumn h2.work {
    margin:15px 0 0 150px;
    background:#FFF url(images/title_work.gif) no-repeat;
}
#content #leftcolumn h2.about {
    margin:30px 0 0 15px;
    background:#FFF url(images/title_about.gif) no-repeat;
}
#content #rightcolumn h2.contact {
    width:200px;
    background:#FFF url(images/title_contact.gif) no-repeat;
}
#content #leftcolumn {
    float:left;
    width:460px;
    margin:6px 0 0 5px;
}
#content #leftcolumn .boximg {
  position: relative;
  display: inline;
  overflow: hidden;
  float: left;
  width: 134px;
  height: 84px;
  margin: 10px 0 0 10px;
  font-size:8px;
  font-weight:bold;
  color:#FFF;
  border: 3px solid #EBEBEB;
}
#content #leftcolumn .boximg span {
  display: none;
}
#content #leftcolumn .boximg:hover {
  border: 3px solid #333;
}
#content #leftcolumn .boximg:hover span {
  /*opacity: 0.75;*/
  /*filter: alpha(opacity = 75);*/
  background: #333;
  bottom: 0;
  display: block;
  font-size: 1.2em;
  padding: 8px;
  position: absolute;
  width: 140px;
}
* html #content #leftcolumn .boximg:hover span {
  width: 185px;
}
#content #leftcolumn p {
    margin-left:60px;
    font-size:11px;
}
#content #rightcolumn {
    float:right;
    width:300px;
    margin:36px 5px 0 0;
}
#content #rightcolumn a.but_twitter {
    display:block;
    float:left;
    width:130px;
    height:40px;
    text-indent:-8000px;
    background:transparent url(images/but_twitter.png) left top no-repeat;
}
#content #rightcolumn a.but_delicious {
    display:block;
    float:left;
    width:130px;
    height:40px;
    text-indent:-8000px;
    background:transparent url(images/but_delicious.png) left top no-repeat;
}
#content #rightcolumn a.but_twitter:hover {
    background:transparent url(images/but_twitter.png) left bottom no-repeat;
}
#content #rightcolumn a.but_delicious:hover {
    background:transparent url(images/but_delicious.png) left bottom  no-repeat;
}
#content #rightcolumn #formmsg {
    float:left;
    line-height:40px;
}
#content #rightcolumn #loader {
    color:#004080;
    line-height:40px;
}
#content #rightcolumn #loader img {
    vertical-align: middle;
}
ul#contact-alternatively li {
	width: 200px;
	height: 32px;
	padding-left: 40px;
	line-height: 32px;
	color:#0068BE;
}
ul#contact-alternatively li.phone {
    background:transparent url(images/icons.gif) no-repeat;
}
ul#contact-alternatively li.email {
    background:transparent url(images/icons.gif) left -32px no-repeat;
}
ul#contact-alternatively li.msn {
    background:transparent url(images/icons.gif) left -64px no-repeat;
}
ul#contact-alternatively li.gtalk {
    background:transparent url(images/icons.gif) left -96px no-repeat;
}
/*
FOOTER
*****/
#footer {
    clear:both;
    width:210px;
    height:35px;
    margin: 0 auto;
    color:#FFF;
}
#footer span {
    position:absolute;
    margin:-40px 0 0 195px;
    font-weight:bold;
}
#footer img {
    margin-top:8px;
}