/*
	Author:
		Mariana de Paula
		email@marianadepaula.com
		http://www.marianadepaula.com/
*/

* { margin: 0; padding: 0; }

body {
	font: 100% "Trebuchet MS", "sans-serif";
	background: url(images/body-bg.jpg) top left repeat;
}

a { outline: none; text-decoration: none; color: #900; }
a:hover { text-decoration: underline; }
a img { border: none; }
ul { list-style: none inside; }
h1 { font-size: 2.4em; color: #DDD; height: 50px; }

#page-wrap {
	width: 850px;
	margin: 0 auto;
	background: url(images/pagewrap-bg.jpg) top left repeat-y;
}

#header {
	width: 850px;
	height: 288px;
	background: url(images/header.jpg) top left no-repeat;
}

#tag {
	float: right;
	width: 140px;
	height: 146px;
	padding: 110px 0 0 30px;
	background: url(images/tag.png) no-repeat;
}

#tag li a {
	display: block;
	width: 115px;
	height: 24px;
	text-indent: -9999px;
}
.home { background: url(images/tag/home.png) bottom left no-repeat; }
.contato { background: url(images/tag/contato.png) bottom left no-repeat; }
.forum { background: url(images/tag/forum.png) bottom left no-repeat; }
.blog { background: url(images/tag/blog.png) bottom left no-repeat; }
.home:hover, .contato:hover, .forum:hover, .blog:hover { background-position: top left; }

#content {
	float: left;
	width: 550px;
	font-size: 0.95em;
	padding: 0 20px 30px 55px;
}

#content p { padding: 5px; }

ul#nav {
	float: left;
	width: 225px;
	background: url(images/nav-bg.jpg) top left no-repeat;
}
ul#nav li a {
	display: block;
	width: 225px;
	height: 56px;
	text-indent: -9999px;
}
.quemsomos { background: url(images/nav/quemsomos.png) bottom center no-repeat; }
.rpg { background: url(images/nav/rpg.png) no-repeat; }
	.rpg-oquee { background: url(images/nav/rpg-oquee.png) bottom center no-repeat; }
	.rpg-storyteller { background: url(images/nav/rpg-storyteller.png) bottom center no-repeat; }
	.rpg-storytelling { background: url(images/nav/rpg-storytelling.png) bottom center no-repeat; }
	.rpg-ded { background: url(images/nav/rpg-ded.png) bottom center no-repeat; }
	.rpg-daemon { background: url(images/nav/rpg-daemon.png) bottom center no-repeat; }
	.rpg-outros { background: url(images/nav/rpg-outros.png) bottom center no-repeat; }
.projetos { background: url(images/nav/projetos.png) no-repeat; }
	.pro-mundotrevas  { background: url(images/nav/pro-mundotrevas.png) bottom center no-repeat; }
	.pro-ded  { background: url(images/nav/pro-ded.png) bottom center no-repeat; }
	.pro-daemon  { background: url(images/nav/pro-daemon.png) bottom center no-repeat; }
.atividades { background: url(images/nav/atividades.png) no-repeat; }
	.ati-batalha  { background: url(images/nav/ati-batalha.png) bottom center no-repeat; }
	.ati-oficina  { background: url(images/nav/ati-oficina.png) bottom center no-repeat; }
	.ati-arenas  { background: url(images/nav/ati-arenas.png) bottom center no-repeat; }
	.ati-eventos  { background: url(images/nav/ati-eventos.png) bottom center no-repeat; }
.fotos { background: url(images/nav/fotos.png) bottom center no-repeat; }
.podcast { background: url(images/nav/podcast.png) bottom center no-repeat; }
.links { background: url(images/nav/links.png) bottom center no-repeat; }
.vendas { background: url(images/nav/vendas.png) bottom center no-repeat; }

.quemsomos:hover, .fotos:hover, .podcast:hover, .links:hover, .vendas:hover,
.rpg-oquee:hover, .rpg-storyteller:hover, .rpg-storytelling:hover,
.rpg-ded:hover, .rpg-daemon:hover, .rpg-outros:hover,
.pro-mundotrevas:hover, .pro-ded:hover, .pro-daemon:hover,
.ati-batalha:hover, .ati-oficina:hover, .ati-arenas:hover, .ati-eventos:hover { background-position: top center; }

ul#nav div.sub a {
	display: block;
	width: 225px;
	height: 21px;
	text-indent: -9999px;
}

ul#nav div.sub {
	text-indent: -9999px;
}

#footer {
	height: 190px;
	width: 850px;
	background: url(images/footer-bg.jpg) no-repeat;
	font-size: .75em;
	padding: 90px 0 0 0;
	text-indent: 40px;
	font-weight: bold;
}

#footer a {
	color: #000;
}

.footersub {
	text-indent: 50px;
	font-weight: normal;
}

#footercol1, #footercol2, #footercol3, #credits { float: left; }
#credits { text-indent: 50px; font-weight: normal; }

.clearfloat {
	clear: both;
}

/* Photo Gallery */
.photo-link	{ padding: 5px; margin: 5px; border: 1px solid #999; display: block; width: 100px; float: left; }
.photo-link:hover { border-color: #600; }