Social Story

From Labmm2

Revision as of 13:43, 20 June 2011 (view source) 172.16.13.19 (Talk) ← Older edit		Revision as of 14:27, 20 June 2011 (view source) 172.16.13.19 (Talk) Newer edit →
Line 49:		Line 49:
-	HOMEPAGE	+	/*
		+
		+	* styles.css
		+	*
-	body {	+	*/
-	background-color:#2f373b;	+
		+
		+
		+
		+	div#nav {
		+
		+	z-index: 1;
		+
		+	position: fixed;
		+
		+	width: 100%;
		+
		+	bottom: 0px;
		+
		+	background-color: #1D4088;
		+
		+	padding-left: 1em;
		+
		+	padding-top: 8px;
		+
		+	padding-right: 1em;
		+
		+	}
		+
		+
		+	div.presentation {
		+
		+	position:fixed;
		+
		+	height:444px;
		+
		+	width:899px;
		+
		+	margin-left: 5px
		+
		+	margin-top: 10px;
		+
		+	display: block;
		+
		+	background-color:inherit;
		+
		+	/* border: 1px solid green;*/
		+
		+	}
		+
		+
		+	.slide cover current {
		+
		+	background-color:#535B5E;
		+
		+	}
		+
		+
		+	div.slides {
		+
		+	width: 899px;;
		+
		+	height: 100%;
		+
		+	overflow:hidden;
		+
		+	left: 0;
		+
		+	top: 0;
		+
		+	position: absolute;
		+
		+	display: block;
		+
		+	-webkit-transition: -webkit-transform 0.5s ease-in-out;
		+
		+	-moz-transition: -moz-transform 0.5s ease-in-out;
		+
		+	-o-transition: -o-transform 0.5s ease-in-out;
		+
		+	background-color:inherit;
		+
		+	}
		+
		+
		+	.center intro{
		+
		+	background-color:inherit;
		+
		+	}
		+
		+
		+	.instructions-screen {
		+
		+	background-color:inherit;
		+
		+	}
		+
		+
		+	div.slide {
		+
		+	display: none;
		+
		+	position: absolute;
		+
		+	overflow: visible;
		+
		+	width: 900px;
		+
		+	height: 899px;
		+
		+	left: 50%;
		+
		+	top: 50%;
		+
		+	margin-top: -350px;
		+
		+	background-color: #535B5E;
		+
		+	background-repeat:no-repeat;
		+
		+	background-image:url(Fundo%20verde.png);
		+
		+	-webkit-transition: margin 0.25s ease-in-out;
		+
		+	-moz-transition: margin 0.25s ease-in-out;
		+
		+	-o-transition: margin 0.25s ease-in-out;
		+
		+	box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;
		+
		+	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;
		+
		+	-moz-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;
		+
		+	-moz-border-radius: 10px;
		+
		+	-webkit-border-radius: 10px;
		+
		+	border-radius: 10px;
		+
		+	}
		+
		+
		+	.slide.far-past {
		+
		+	display: block;
		+
		+	margin-left: -2450px;
		+
		+	}
		+
		+
		+	.slide.past {
		+
		+	display: block;
		+
		+	margin-left: -1450px;
		+
		+	}
		+
		+
		+	.slide.current {
		+
		+	display: block;
		+
		+	margin-left: -450px;
		+
		+	}
		+
		+
		+	.slide.future {
		+
		+	display: block;
		+
		+	margin-left: 550px;
		+
		+	}
		+
		+	.slide.far-future {
		+
		+	display: block;
		+
		+	margin-left: 1550px;
		+
		+	}
		+
		+
		+	body.three-d div.slides {
		+
		+	-webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
		+
		+	-moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
		+
		+	-o-transform: translateX(50px) scale(0.8) rotateY(10deg);
		+
		+	}
		+
		+
		+	body.hide div.slides {
		+
		+	top: -80%;
		+
		+	-webkit-transition: top 0.25s ease-in-out;
		+
		+	}
		+
		+
		+	body.show div.slides {
		+
		+	top: 0%;
		+
		+	-webkit-transition: top 0.25s ease-in-out;
		+
		+	}
		+
		+
		+	/*Style*/
		+
		+
		+	/*Type*/
		+
		+
		+
		+	@font-face {
		+
		+	font-family: 'TradeGothicLTStdCnBold';
		+
		+	src: url('../fonts/tradegothicltstd-bdcn20/tradegothicltstd-bdcn20-webfont.eot');
		+
		+	src: local('☺'), url('../fonts/tradegothicltstd-bdcn20/tradegothicltstd-bdcn20-webfont.woff') format('woff'),
		+
		+	url('../fonts/tradegothicltstd-bdcn20/tradegothicltstd-bdcn20-webfont.ttf') format('truetype'), url('../fonts/tradegothicltstd-bdcn20/tradegothicltstd-bdcn20-webfont.svg#webfontYPITXSXP') format('svg');
		+
		+	font-weight: normal;
		+
		+	font-style: normal;
		+
		+	}
		+
		+
		+	/*Nav*/
		+
		+
		+	div#nav #title {
		+
		+	float: left;
		+
		+	width: 60%;
		+
		+	color: #fff;
		+
		+	}
		+
		+
		+	div#nav #title h1{
		+
		+	display: inline;
		+
		+	font-family: 'TradeGothicLTStdCnBold',Arial,sans-serif;
		+
		+	font-weight: normal;
		+
		+	text-transform: uppercase;
		+
		+	font-size: 24px;
		+
		+	}
		+
		+
		+	div#nav #title h2{
		+
		+	font-family: 'TradeGothicLTStdRegular',Arial,sans-serif;
		+
		+	display: inline;
		+
		+	}
		+
		+
		+	div#nav #title a {
		+
		+	color: #fff;
		+
		+	text-decoration: none;
		+
		+	}
		+
		+
		+	div#nav #title a:hover {
		+
		+	text-decoration: underline;
		+
		+	}
		+
		+
		+	ul.slidenav {
		+
		+	float: right;
		+
		+	width: 200px;
		+
		+	/*border: 1px green solid;*/
		+
		+	text-align: right;
		+
		+	padding-right: 30px;
		+
		+	}
		+
		+
		+	ul.slidenav li {
		+
		+	font-family: 'TradeGothicLTStdCnBold',Arial,sans-serif;
		+
		+	font-weight: normal;
		+
		+	text-transform: uppercase;
		+
		+	font-size: 24px;
		+
		+	display: inline;
		+
		+	list-style-type: none;
		+
		+	padding-left: 10px;
		+
		+	}
		+
		+
		+	/*Slide*/
		+
		+
		+	header {
		+
		+	position: absolute;
		+
		+	left: 30px;
		+
		+	top: 18px;
		+
		+	margin-left: -44px;
		+
		+	padding-bottom: 14px;
		+
		+	background: url(../images/headerBg.png) no-repeat 0 80px;
		+
		+	}
		+
		+
		+	h1{
		+
		+	size:100px;
		+
		+	font-family: font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
		+
		+	color:#aed2cc;
		+
		+	}
		+
		+
		+	header h1{
		+
		+	font-family: font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
		+
		+	font-weight: normal;
		+
		+	font-size: 100px;
		+
		+	text-transform: uppercase;
		+
		+	color: #aed2cc;
		+
		+	height: 73px;
		+
		+	padding-top: 7px;
		+
		+	padding-right: 12px;
		+
		+	padding-left: 8px;
		+
		+	display: inline-block;
		+
		+	}
		+
		+
		+	header h2{
		+
		+	font-family: 'TradeGothicLTStdBoldRegular',Arial,sans-serif;
		+
		+	font-weight: normal;
		+
		+	font-size: 72px;
		+
		+	text-transform: uppercase;
		+
		+	color: #fff;
		+
		+	height: 73px;
		+
		+	padding-top: 7px;
		+
		+	padding-right: 12px;
		+
		+	padding-left: 8px;
		+
		+	background-color: #c3bfb9;
		+
		+	display: inline-block;
		+
		+	}
		+
		+
		+	subheader {
		+
		+	position: absolute;
		+
		+	left: 70px;
		+
		+	top: 106px;
		+
		+	width: 842px;
		+
		+	padding-bottom: 12px;
		+
		+	background: url(../images/subheaderBg.png) no-repeat 830px 46px;
		+
		+	}
		+
		+
		+	subheader h3 {
		+
		+	font-family: 'ClarendonFSBold',Arial,sans-serif;
		+
		+	font-weight: normal;
		+
		+	font-size: 36px;
		+
		+	/*line-height: 36px;*/
		+
		+	color: #69604f;
		+
		+	height: 46px;
		+
		+	padding-left: 8px;
		+
		+	background-color: #CB9;
		+
		+	}
		+
		+
		+	flag {
		+
		+	position: absolute;
		+
		+	left: 13px;
		+
		+	top: 106px;
		+
		+	-webkit-transform-origin: 0px 0px;
		+
		+	-webkit-transform: rotate(-90deg);
		+
		+	-moz-transform-origin: 0px 0px;
		+
		+	-moz-transform: rotate(-90deg);
		+
		+	transform: rotate(-90deg);
		+
		+	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
		+
		+	margin-top: 300px;
		+
		+	width: 300px;
		+
		+	text-align: right;
		+
		+	}
		+
		+
		+	flag h4{
		+
		+	font-family: 'TradeGothicLTStdBoldRegular',Arial,sans-serif;
		+
		+	font-weight: normal;
		+
		+	font-size: 36px;
		+
		+	text-transform: uppercase;
		+
		+	color: #fff;
		+
		+	/*background-color: #f60;*/
		+
		+	display: inline-block;
		+
		+	padding-top: 9px;
		+
		+	padding-left: 30px;
		+
		+	padding-right: 10px;
		+
		+	height: 41px;
		+
		+	background: #f60 url(../images/flagBg.png) no-repeat;
		+
		+	}
		+
		+
		+	section {
		+
		+	font-family: 'TradeGothicLTStdRegular',Arial,sans-serif;
		+
		+	font-size: 32px;
		+
		+	color: #3D5998;
		+
		+	margin-left: 50px;
		+
		+	margin-right: 30px;
		+
		+	margin-top: 220px;
		+
		+	display: block;
		+
		+	overflow: hidden;
		+
		+	height: 525px;
		+
		+	}
		+
		+
		+	div.slide section.center.intro h1{
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;		font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
		+
		+	font-size: 100px;
		+
		+	text-transform: uppercase;
		+
		+	color: #AED2CC;
		+
		+	margin-top:220px;
		+
		+	margin-left:105px;
	}		}
-	.content{	+	div.slide section.center.intro h2{
-	padding:5px;	+	font-family: 'ClarendonFSMediumRegular',Arial,sans-serif;
-	width:919px;	+	font-weight: normal;
-	vertical-align:middle;	+	font-size: 32px;
-	text-align:center;	+	color: #CB9;
		+
		+	margin: 0;
		+
		+	padding: 0;
		+
		+	line-height: 36px;
	}		}
-	.centro{	+	div.slide section.center.intro .instructions-screen{
-	margin-top:250px;	+	font-size: 15px;
-	margin-left:420px;	+	margin-top: 5px;
		+
		+	width:899px;
	}		}
-	.iniciar{	+	div.slide section.center.intro .instructions-screen p{
-	width:80px;	+	padding: 1px 2px;
-	height:20px;	+	}
-	margin-top:10px;
-	margin-left:900px;	+	div.slide section.center.intro .credit{
-	background-color:#2f5d72;	+	font-size: 14px;
-	-moz-border-radius: 5px;	+	position: absolute;
-	-webkit-border-radius: 5px;	+	bottom: 40px;
-	border-radius: 5px;	+	}
-	color:#FFF;
-	text-align:center;	+	div.slide.center {
-	padding:2px;	+	border: 1px solid red;
-	vertical-align:middle;	+	padding: 300px;
	}		}
-	a:link,a:active,a:visited{	+	div.slide blockquote {
-	opacity:0.50;	+	font-family: 'TradeGothicLTStdBoldRegular',Arial,sans-serif;
-	-moz-opacity: 0.50;	+	margin-top: 120px;
-	filter: alpha(opacity=50);	+	/*border: 1px solid red;*/
-	text-decoration:none;	+	font-size: 72px;
-	color:#FFF;	+	height: 200px;
		+
		+	width: 100%;
	}		}
-	a:hover{	+	.bqstart {
-	opacity:1;	+	float: left;
-	-moz-opacity:1;	+	height: 300px;
-	filter: alpha(opacity=100);	+	margin-top: -90px;
-	text-decoration:none;	+	margin-right: 10px;
-	color:#FFF;	+	padding-top: 45px;
		+
		+	margin-bottom: -50px;
		+
		+	font-size: 300%;
		+
		+	color: #c3bfb9;
		+
		+	/*border: 1px solid red;*/
		+
		+	}
		+
		+
		+	.bqend {
		+
		+	float: right;
		+
		+	height: 100px;
		+
		+	margin-top: 10px;
		+
		+	padding-top: 0px;
		+
		+	font-size: 300%;
		+
		+	color: #c3bfb9;
		+
		+	/*border: 1px solid red;*/
		+
		+	}
		+
		+	div.slide .frame {
		+
		+	padding: 10px;
		+
		+	border: 1px solid #E5E5E5;
		+
		+	box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;
		+
		+	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;
		+
		+	-moz-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;
		+
		+	display: inline-block;
	}		}
		+
		+
		+	div.slide .split .frame {
		+
		+	float: left;
		+
		+	}
		+
		+
		+	/*div.slide img {
		+
		+	padding: 10px;
		+
		+	border: 1px solid #E5E5E5;
		+
		+	box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;
		+
		+	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;
		+
		+	-moz-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;
		+
		+	}*/
		+
		+
		+	div.slide ul{
		+
		+	margin-top: 0.25em;
		+
		+	margin-left: 40px;
		+
		+	}
		+
		+
		+	div.slide .split ul {
		+
		+	margin-left: 415px;
		+
		+	/*border: 1px red solid;*/
		+
		+
		+	}
		+
		+
		+	div.slide ul li{
		+
		+	margin-top: 0.25em;
		+
		+	padding-left: 0.5em;
		+
		+	background: url(../images/ulBullet.png) no-repeat 0px 10px;
		+
		+	/*border: 1px solid orange;*/
		+
		+	}
		+
		+
		+	div.slide ul.imagelist {
		+
		+	margin: 0;
		+
		+	padding: 0;
		+
		+	height: 340px;
		+
		+	}
		+
		+
		+	div.slide ul.imagelist li {
		+
		+	display: inline;
		+
		+	list-style-type: none;
		+
		+	margin: 0;
		+
		+	padding: 0;
		+
		+	}
		+
		+
		+	/*div.slide ul.imagelist li img {
		+
		+	}*/
		+
		+
		+	div.slide section h4 {
		+
		+	font-family: 'TradeGothicLTStdBold',Arial,sans-serif;
		+
		+	margin-left: 0.25em;
		+
		+	margin-top: 0.5em;
		+
		+	font-size: 32px;
		+
		+	/*line-height: 36px;*/
		+
		+	color: #CB9;
		+
		+	}
		+
		+
		+	div.slide a {
		+
		+	color: #c35922;
		+
		+	text-decoration: none;
		+
		+	}
		+
		+
		+	div.slide a:hover {
		+
		+	text-decoration: underline;
		+
		+	}
		+
		+
		+	div.slide .social {
		+
		+	position: absolute;
		+
		+	right: 75px;
		+
		+	bottom: 18px;
		+
		+	/*border: 1px solid red;*/
		+
		+	}
		+
		+
		+	div.slide .imagecontainer{
		+
		+	position: relative;
		+
		+	display: inline-block;
		+
		+	margin-bottom: 10px;
		+
		+	line-height: 0;
		+
		+	}
		+
		+
		+	div.imagecontainer .overlay{
		+
		+	position: absolute;
		+
		+	right: 0px;
		+
		+	bottom: 0px;
		+
		+	}
		+
		+
		+	div.imagecontainer.frame .overlay{
		+
		+	right: 10px;
		+
		+	bottom: 10px;
		+
		+	}
		+
		+
		+	.slidenav a {
		+
		+	color: #fff;
		+
		+	text-decoration: none;
		+
		+	}
		+
		+
		+	.slidenav a:hover {
		+
		+	text-decoration: underline;
		+
		+	}
		+
		+
		+	div.slide p {
		+
		+	/*margin-top: 0.25em;*/
		+
		+	padding-top: 5px;
		+
		+	/*border: 1px solid red;*/
		+
		+	}
		+
		+
		+	div.slide p.link {
		+
		+	padding-left: 48px;
		+
		+	background: url(../images/linkIconLink01_A01.png) no-repeat;
		+
		+	/*border: 1px solid red;*/
		+
		+	}
		+
		+
		+	div.slide p.learn {
		+
		+	margin-top: 0.4em;
		+
		+	padding-left: 48px;
		+
		+	background: url(../images/linkIconLearn01_A01.png) no-repeat;
		+
		+	/*border: 1px solid red;*/
		+
		+	}
		+
		+
		+	/*pre*/
		+
		+
		+	pre {
		+
		+	text-align: left;
		+
		+	font-size: 16px;
		+
		+	font-family: Monaco, Courier;
		+
		+	margin-top: 0.25em;
		+
		+	padding: 10px 20px;
		+
		+	background: rgba(215, 210, 201, 0.22);
		+
		+	border: 1px dashed #c3bfb9;
		+
		+	}
		+
		+
		+	pre.large {
		+
		+	font-size: 22px;
		+
		+	}
		+
		+
		+	pre.css {
		+
		+	font-size: 22px;
		+
		+	background: rgba(255, 102, 0, 0.15);
		+
		+	border: 1px dashed #f60;
		+
		+	}
		+
		+
		+	pre b, pre strong {
		+
		+	font-weight: normal;
		+
		+	color: #c61800;
		+
		+	text-shadow: #c61800 0 0 1px;
		+
		+	}
		+
		+
		+	/*.notes { display: none; }*/
		+
		+
		+	.notes {
		+
		+	position: absolute;
		+
		+	width: 780px;
		+
		+	bottom: 0%;
		+
		+	margin-bottom: 1em;
		+
		+	margin-left: 50px;
		+
		+	color: #fff;
		+
		+	background-color: rgba(0, 0, 0, 0.75);
		+
		+	padding: 10px;
		+
		+	font-size: 12px;
		+
		+	-moz-border-radius: 8px;
		+
		+	-webkit-border-radius: 8px;
		+
		+	/*text-shadow: rgba(0, 0, 0, 0.6) 0 1px 1px;*/
		+
		+	display: none;
		+
		+	}
		+
		+
		+	.notes h3 {
		+
		+	font-weight: bold;
		+
		+	}
		+
		+
		+	.notes ul {
		+
		+	margin-left: 2em !important;
		+
		+	padding: 0 !important;
		+
		+	}
		+
		+
		+	.notes ul li {
		+
		+	list-style-type: disc ;
		+
		+	margin: 0px !important;
		+
		+	padding: 0px !important;
		+
		+	background: none !important;
		+
		+	}
		+
		+
		+	div.slide .notes a {
		+
		+	color: #f60;
		+
		+	}
		+
		+
		+	div.gallery {
		+
		+	display:none;
		+
		+	}
		+

---

Revision as of 14:27, 20 June 2011

Espaço destinado a inserção do Relatório do projecto "Social Story" desenvolvido pelos alunos:

Alexandre Pereira - 49994

Ana Sofia Paiva - 49997

Júlia Farias - 60123

António Alves - 60352

Tiago Vieira - 50765

Contents 1 Apresentação e contextualização do tema 2 Layouts 3 Estrutura XHTML implementada 4 Folhas de estilos (CSS) 5 Principais scripts desenvolvidas (JavaScript) 6 Integração com outras tecnologias (frameworks, linguagens, etc...) 7 Soluções técnicas para problemas encontrados 8 Melhoramentos futuros 9 Conclusões 10 Referências bibliográficas 11 Anexos

Apresentação e contextualização do tema

Após um processo de brainstorming (*) inicial, tivemos em conjunto a ideia inicial: As redes sociais. A partir daí, desenvolvemos o nosso super conceito, que vai estar presente durante a aplicação multimédia: apresentar, de uma forma diferente, a história/importância das redes sociais na actualidade e o seu impacto através da vida de uma pessoa. Assim, vivendo num mundo contemporâneo e onde a internet tem um papel cada vez mais marcante sobre as vidas das pessoas, achamos esta temática pertinente para além de interessante para a população em geral.

Desta forma, os nossos objectivos envolvem : 1 – Apresentação das vantagens e desvantagens das redes sociais: pretendemos contar, de forma curiosa, dinâmica e engraçada os diversos episódios da vida de uma personagem fictícia de forma a mostrar o impacto das redes sociais na vida das suas pessoas, o que inclui situações positivas e situações negativas.; 2 - Apresentar a história destas mesmas redes através de uma componente mais informativa, onde mostraremos algumas curiosidades para além da história das principais redes sociais, mostrando ao utilizador a sua importância na história dos websites online. 3 - Sensibização da população para algumas questões mais polémicas relacionadas com as redes sociais e a vida social online: Mostrar que a criação de uma rede online pode ser positiva, quando utilizada da maneira certa ou negativa, quando a privacidade é excedida juntamente com importância de criar um equilíbrio entre “o que é bom” e o “que é mal” na utilização destas redes. Pretendemos também incentivar o utilizador a formar a sua própria opinião e pensamento crítico. 4 – Construir um website diferente e que as pessoas possam reconhecer : Criar uma página web graficamente simples mas interessante, directa e original, utilizando diversas formas de apresentação dos conteúdos (vídeo,fotos,etc...). Implementar funcionalidades interessantes (livro,menu,vídeos,imagens), inovando os tradicionais websites informativos

(*) - Brainstorming

Da primeira reunião surgiram ideias que passamos a citar: um site sobre futebol, sobre uma festa; (algo relacionado com cerveja); sobre turismo; viagens; o desenvolvimento de uma página web sobre fotografia; a criação de um portfólio virtual (do trabalho de um artísta, construtor,...); o desenvolvimento de uma magazine online; uma magazine online de fotografias; o desenvolvimento de uma história, contando-a interactivamente; a criação de um livro; um site sobre redes sociais; a criação de um livro que contasse uma história relacionada com as redes sociais de forma interactiva. Como podemos constatar, o processo de brainstorming passou desde ideias menos boas até pequenas ideias que combinadas resultaram no super conceito final.

No que toca a escolha feita, inicialmente, a nossa intenção era apenas contar uma história fictícia onde pudessemos mostrar as vantagens/desvantagens na utilização das redes sociais. No entanto, achamos que deveriamos disponibilizar uma área mais informativa, daí a inserção das curiosidades sobre cada uma das principais redes sociais.

Layouts

Estruturas 'gerais'

Estrutura geral

Pagina de entrada

Index

Layouts de cada página

Estrutura XHTML implementada

Folhas de estilos (CSS)

/*

* styles.css

*

*/

div#nav {

z-index: 1;

position: fixed;

width: 100%;

bottom: 0px;

background-color: #1D4088;

padding-left: 1em;

padding-top: 8px;

padding-right: 1em;

}

div.presentation {

position:fixed;

height:444px;

width:899px;

margin-left: 5px

margin-top: 10px;

display: block;

background-color:inherit;

/* border: 1px solid green;*/

 }

.slide cover current {

background-color:#535B5E;

}

div.slides {

     width: 899px;;

     height: 100%;

overflow:hidden;

     left: 0;

     top: 0;

     position: absolute;

     display: block;
 
     -webkit-transition: -webkit-transform 0.5s ease-in-out;

     -moz-transition: -moz-transform 0.5s ease-in-out;

     -o-transition: -o-transform 0.5s ease-in-out;

background-color:inherit;

}

.center intro{

background-color:inherit;

}

.instructions-screen {

background-color:inherit;

}

div.slide {

   display: none;

   position: absolute;

   overflow: visible;

   width: 900px;

   height: 899px;

   left: 50%;

   top: 50%;

   margin-top: -350px;

background-color: #535B5E;

background-repeat:no-repeat;

background-image:url(Fundo%20verde.png);

   -webkit-transition: margin 0.25s ease-in-out; 

   -moz-transition: margin 0.25s ease-in-out;

   -o-transition: margin 0.25s ease-in-out;

   box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

   -webkit-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

   -moz-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

}

.slide.far-past {

display: block;

margin-left: -2450px;

}

.slide.past {

display: block;

margin-left: -1450px;

}

.slide.current {

display: block;

margin-left: -450px;

}

.slide.future {

display: block;

margin-left: 550px;

}

.slide.far-future {

display: block;

margin-left: 1550px;

}

body.three-d div.slides {

-webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);

-moz-transform: translateX(50px) scale(0.8) rotateY(10deg);

-o-transform: translateX(50px) scale(0.8) rotateY(10deg);

}

body.hide div.slides {

top: -80%;

-webkit-transition: top 0.25s ease-in-out;

}

body.show div.slides {

top: 0%;

-webkit-transition: top 0.25s ease-in-out;

}

/*Style*/

/*Type*/

@font-face {

font-family: 'TradeGothicLTStdCnBold';

src: url('../fonts/tradegothicltstd-bdcn20/tradegothicltstd-bdcn20-webfont.eot');

src: local('☺'), url('../fonts/tradegothicltstd-bdcn20/tradegothicltstd-bdcn20-webfont.woff') format('woff'),

url('../fonts/tradegothicltstd-bdcn20/tradegothicltstd-bdcn20-webfont.ttf') format('truetype'), url('../fonts/tradegothicltstd-bdcn20/tradegothicltstd-bdcn20-webfont.svg#webfontYPITXSXP') format('svg');

font-weight: normal;

font-style: normal;

}

/*Nav*/

div#nav #title {

float: left;

width: 60%;

color: #fff;

}

div#nav #title h1{

display: inline;

font-family: 'TradeGothicLTStdCnBold',Arial,sans-serif;

   font-weight: normal;

   text-transform: uppercase;

   font-size: 24px;

}

div#nav #title h2{

font-family: 'TradeGothicLTStdRegular',Arial,sans-serif;

display: inline;

}

div#nav #title a {

color: #fff;

text-decoration: none;

}

div#nav #title a:hover {

text-decoration: underline;

}

ul.slidenav {

float: right;

width: 200px;

/*border: 1px green solid;*/

text-align: right;

padding-right: 30px;

}

ul.slidenav li {

font-family: 'TradeGothicLTStdCnBold',Arial,sans-serif;

   font-weight: normal;

   text-transform: uppercase;

   font-size: 24px;

display: inline;

list-style-type: none;

padding-left: 10px;

}

/*Slide*/

header {

   position: absolute;

   left: 30px;

   top: 18px;

   margin-left: -44px;

   padding-bottom: 14px;

background: url(../images/headerBg.png) no-repeat 0 80px;

}

h1{

size:100px;

font-family: font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

color:#aed2cc;

}

header h1{

font-family: font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

   font-weight: normal;

   font-size: 100px;

   text-transform: uppercase;

   color: #aed2cc;

height: 73px;

padding-top: 7px;

padding-right: 12px;

padding-left: 8px;

display: inline-block;

}

header h2{

font-family: 'TradeGothicLTStdBoldRegular',Arial,sans-serif;

   font-weight: normal;

   font-size: 72px;

   text-transform: uppercase;

   color: #fff;

height: 73px;

padding-top: 7px;

padding-right: 12px;

padding-left: 8px;

background-color: #c3bfb9;

display: inline-block;

}

subheader {

   position: absolute;

   left: 70px;

   top: 106px;

   width: 842px;

   padding-bottom: 12px;

background: url(../images/subheaderBg.png) no-repeat 830px 46px;

}

subheader h3 {

   font-family: 'ClarendonFSBold',Arial,sans-serif;

   font-weight: normal;

   font-size: 36px;

   /*line-height: 36px;*/

   color: #69604f;

height: 46px;

padding-left: 8px;

background-color: #CB9;

}

flag {

   position: absolute;

   left: 13px;

   top: 106px;

   -webkit-transform-origin: 0px 0px;

-webkit-transform: rotate(-90deg);

-moz-transform-origin: 0px 0px;

-moz-transform: rotate(-90deg);

transform: rotate(-90deg);

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

margin-top: 300px;

width: 300px;

text-align: right;

}

flag h4{

font-family: 'TradeGothicLTStdBoldRegular',Arial,sans-serif;

   font-weight: normal;

   font-size: 36px;

   text-transform: uppercase;

   color: #fff;

/*background-color: #f60;*/

display: inline-block;

padding-top: 9px;

padding-left: 30px;

padding-right: 10px;

height: 41px;

background: #f60 url(../images/flagBg.png) no-repeat;

}

section {

font-family: 'TradeGothicLTStdRegular',Arial,sans-serif;

font-size: 32px;

color: #3D5998;

margin-left: 50px;

margin-right: 30px;

margin-top: 220px;

display: block;

overflow: hidden;

height: 525px;

}

div.slide section.center.intro h1{

font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

font-size: 100px;

text-transform: uppercase;

color: #AED2CC;

margin-top:220px;

margin-left:105px;

}

div.slide section.center.intro h2{

font-family: 'ClarendonFSMediumRegular',Arial,sans-serif;

   font-weight: normal;

   font-size: 32px;

   color: #CB9;

   margin: 0;

   padding: 0;

   line-height: 36px;

}

div.slide section.center.intro .instructions-screen{

font-size: 15px;

margin-top: 5px;

width:899px;

}

div.slide section.center.intro .instructions-screen p{

padding: 1px 2px;

}

div.slide section.center.intro .credit{

font-size: 14px;

position: absolute;

bottom: 40px;

}

div.slide.center {

border: 1px solid red;

padding: 300px;

}

div.slide blockquote {

font-family: 'TradeGothicLTStdBoldRegular',Arial,sans-serif;

margin-top: 120px;

/*border: 1px solid red;*/

font-size: 72px;

height: 200px;

width: 100%;

}

.bqstart {

    float: left;

    height: 300px;

    margin-top: -90px;

    margin-right: 10px;

    padding-top: 45px;

    margin-bottom: -50px;

    font-size: 300%;

    color: #c3bfb9;

    /*border: 1px solid red;*/

}


.bqend {

    float: right;

    height: 100px;

    margin-top: 10px;

    padding-top: 0px;

    font-size: 300%;

    color: #c3bfb9;

    /*border: 1px solid red;*/

}

div.slide .frame {

padding: 10px;

border: 1px solid #E5E5E5;

box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

   -webkit-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px; 

   -moz-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

   display: inline-block;

}

div.slide .split .frame {

float: left;

}

/*div.slide img {

padding: 10px;

border: 1px solid #E5E5E5;

box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

   -webkit-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px; 

   -moz-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px; 

}*/

div.slide ul{

margin-top: 0.25em;

margin-left: 40px;

}

div.slide .split ul {

margin-left: 415px;

/*border: 1px red solid;*/

}

div.slide ul li{

margin-top: 0.25em;

padding-left: 0.5em;

background: url(../images/ulBullet.png) no-repeat 0px 10px;

/*border: 1px solid orange;*/

}

div.slide ul.imagelist {

margin: 0;

padding: 0;

height: 340px;

}

div.slide ul.imagelist li {

display: inline;

list-style-type: none;

margin: 0;

padding: 0;

}

/*div.slide ul.imagelist li img {

}*/

div.slide section h4 {

font-family: 'TradeGothicLTStdBold',Arial,sans-serif;

margin-left: 0.25em;

margin-top: 0.5em;

   font-size: 32px;

   /*line-height: 36px;*/

   color: #CB9;

}

div.slide a {

color: #c35922;

text-decoration: none;

}

div.slide a:hover {

text-decoration: underline;

}

div.slide .social {

position: absolute;

right: 75px;

bottom: 18px;

/*border: 1px solid red;*/

}

div.slide .imagecontainer{

position: relative;

   display: inline-block;

   margin-bottom: 10px;

line-height: 0;

}

div.imagecontainer .overlay{

position: absolute;

right: 0px;

bottom: 0px;

}

div.imagecontainer.frame .overlay{

right: 10px;

bottom: 10px;

}

.slidenav a {

color: #fff;

text-decoration: none;

}

.slidenav a:hover {

text-decoration: underline;

}

div.slide p {

/*margin-top: 0.25em;*/

padding-top: 5px;

/*border: 1px solid red;*/

}

div.slide p.link {

padding-left: 48px;

background: url(../images/linkIconLink01_A01.png) no-repeat;

/*border: 1px solid red;*/

}

div.slide p.learn {

margin-top: 0.4em;

padding-left: 48px;

background: url(../images/linkIconLearn01_A01.png) no-repeat;

/*border: 1px solid red;*/

}

/*pre*/

pre {

   text-align: left;

   font-size: 16px;

   font-family: Monaco, Courier;

   margin-top: 0.25em;

   padding: 10px 20px;

   background: rgba(215, 210, 201, 0.22);

border: 1px dashed #c3bfb9;

}

pre.large {

font-size: 22px;

}

pre.css {

font-size: 22px;

background: rgba(255, 102, 0, 0.15);

border: 1px dashed #f60;

}

pre b, pre strong {

font-weight: normal;

color: #c61800;

text-shadow: #c61800 0 0 1px;

}

/*.notes { display: none; }*/

.notes {

position: absolute;

width: 780px;

   bottom: 0%;

margin-bottom: 1em;

margin-left: 50px;

color: #fff;

background-color: rgba(0, 0, 0, 0.75);

padding: 10px;

font-size: 12px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

/*text-shadow: rgba(0, 0, 0, 0.6) 0 1px 1px;*/

display: none;

}

.notes h3 {

font-weight: bold;

}

.notes ul {

margin-left: 2em !important;

padding: 0 !important;

}

.notes ul li {

list-style-type: disc ;

margin: 0px !important;

padding: 0px !important;

background: none !important;

}

div.slide .notes a {

color: #f60;

}

div.gallery {

display:none;

}

Principais scripts desenvolvidas (JavaScript)

Integração com outras tecnologias (frameworks, linguagens, etc...)

Soluções técnicas para problemas encontrados

Melhoramentos futuros

Conclusões

Referências bibliográficas

Anexos