/************************************************\
 Layout Geral - Screen			                 /
 CSS V.1.00						                 \
 ------------------------------------------------/
 Criado por Epoch Multimédia 2009                \
\************************************************/


/************************************************\
» DEFINIÇÕES GERAIS
\************************************************/

body {
	background-color: #000;
	behavior: url("csshover3.htc"); 
	margin: 0px;
	padding: 0px;
	}

h1,
h2,
h3,
h4,
p,
ul,
li,
img { 
	margin: 0px;
	padding: 0px;
	}

ul { list-style: none }

/************************************************\
» TIPOGRAFIA
\************************************************/

/* Geral */

body {
	color: #FFF;
	font-family: Tahoma, Helvetica, Verdana, sans-serif;
	}

a { 
	color: #6CF; 
	text-decoration: none;
	}

	a:hover { color: #FFF }

h1,
h2,
h3,
h4 { font-weight: normal; }

h3 { font-size: 20px; }

h1 { font-size: 32px; }

h3 { font-size: 20px; }

/* Estrutura */

#blog,
#destak,
#services { font-size: 14px; }

	#blog li.left,
	#blog li.right { font-size: 11px; }

#destak h4 { font-size: 120%; }

#footer { font-size: 10px; }

/************************************************\
» ESTRUTURA
\************************************************/

/* Partilhados */

#blog span.border,
#destak span.border,
#services span.border { 
	border-bottom: solid 1px #FFF;
	border-top: solid 2px #FFF;
	display: block;
	margin-bottom: 6px;
	padding: 6px 0px;
	}

/* estrutura geral */

#mainBG {
	background: url(../layout/mainBG.jpg) center top no-repeat;
	width: 100%;
	display: table;
	}

#container {
	margin: 0 auto;
	padding: 0px 20px;
	width: 854px;
	}

#content {
	float: left;
	width: 854px;
	}

#header { 
	margin-top: 100px;
	margin-bottom: 50px; 
	}

/* entradas do blog */

#blog {
	float: left;
	width: 380px;
	}

	#blog li { 
		border-bottom: solid 1px #FFF;
		padding-bottom: 6px;
		margin-bottom: 6px;
		}

		#blog li a { 
			background: url(../layout/icon_arrowBlue.gif) 0px 6px no-repeat;
			padding-left: 10px;
			}

			#blog li a:hover { background: url(../layout/icon_arrowWhite.gif) 0px 6px no-repeat; }

		#blog li.left,
		#blog li.right { border: none; }

			#blog li.left a,
			#blog li.right a { 
				background: none; 
				padding: 0px;
				}

				#blog li.left a:hover,
				#blog li.right a:hover { text-decoration: underline; }

			#blog li.left {
				background: url(../layout/icon_arrowWhite_toRight.gif) 0px 5px no-repeat;
				float: left;
				padding-left: 10px;
				width: 150px;
				}

			#blog li.right {
				background: url(../layout/icon_arrowWhite.gif) right 5px no-repeat;
				float: right;
				padding-right: 10px;
				text-align: right;
				width: 200px;
				}

/* entrada de destak */

#destak {
	float: right;
	width: 380px;
	}

	#destak span.border { 
		border-bottom: none;
		margin-bottom: 0px;
		}

	#destak span.img { display: block; }

	#destak:hover p.img img { visibility: hidden }

	#destak p.img { 
		border: solid 1px #FFF; 
		margin-bottom: 6px; 
		}

	#destak h4 { margin-bottom: 6px; }

/* Serviços */

#services {
	background:url(../layout/icon_Services_off.jpg) 0px 30px no-repeat;
	border-bottom: solid 2px #FFF;
	clear: both;
	float: left;
	margin-top: 50px;
	width: 854px;
	}

	#services:hover { background:url(../layout/icon_Services_on.jpg) 0px 30px  no-repeat; }

	#services li,
	#services ul { float: left; }

	#services ul { margin-bottom: 8px; }
	
	#services a { 
		display: block;
		float: left;
		height: 50px;
		margin: 6px 40px 6px 0px;
		_margin: 6px 20px 6px 0px; /* hack para ie6 - reorganização dos links */
		overflow: hidden;
		}

		#services a span { display: none; }
		
		#services a.web { width: 80px; }

		#services a.cdrom { width: 50px; }

		#services a.jogo { width: 60px; }

		#services a.animacao { width: 60px; }

		#services a.ilustracao { width: 80px; }

		#services a.logo { width: 60px; }

		#services a.aplicacoes { width: 65px; }

		#services a.redes { 
			width: 90px;
			margin-right: 0px;
			}

/* Footer */

#footer { 
	clear: both;
	float: left;
	margin-bottom: 20px;
	margin-top: 2px;
	width: 100%;
	}

	#footer img { float: right; }

	#footer img.logo,
	#footer p { float: left; }
	
	#footer p { padding-top: 46px; }
	
	#footer p,
	#footer img.logo { 
		margin-right: 95px;
		_margin-right: 70px /* hack para ie6 - reorganização dos ícons */
		}

		#footer img.logo { 
			margin-left: -40px; 
			_margin-left: 0px; /* hack para ie6 - visto q o logo fica cortado com a margem negativa, este é reposicionado */
			}

/************************************************\
» sIFR
\************************************************/

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
	}

.sIFR-replaced {
	visibility: visible !important;
	}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
	}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
	display: none !important;
	}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: hidden;
	}

.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -9px;
	}
/*
.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: -6px;
	}

.sIFR-hasFlash h4 {
	visibility: hidden;
	letter-spacing: -5px;
	}

.sIFR-hasFlash h5#pullquote {
	letter-spacing: -4px;
	visibility: hidden;
	}
*/