/*
10px = 0.7651109%
*/

html {
	background-color: #2160AD;
}

body {
	margin: 15px auto;
	width: 95%;
	background-color: white;
	border-radius: 15px;
}

@media screen and (max-width: 800px)
{
	body {
		margin: 5px auto;
		width: 98%;
	}
}

img {
	max-width: 100%;
	border: none;
}

a:visited, a:active {
	color: blue;
}

/**************************
********** HEADER *********
**************************/

body > header {
	width: 95%;
	height: 100px;
	padding: 0.7651109% 0.7651109% 0 0.7651109%;
}

body > header h1 {
	float: left;
	margin-top: -5px;
	width: 53.33333%;
}

body > header h1 span {
	display: block;
}

body > header #asideImg {
	float: left;
	width: 33.33333%;
	vertical-align: middle;
}

body > header #asideImg img {
	margin-right: 0.7651109%; 
}

body > header #asideHeaderSocialNetwork {
	float: right;
}

body > header #asideHeaderSocialNetwork ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

body > header #asideHeaderSocialNetwork ul li {
	float: left;
	display: block;
}

body > header #asideHeaderSocialNetwork ul li:not(:first-child) {
	margin-left: 2px;
}

body > header h2 {
	float: left;
	width: 66.666666%;
	text-align: left;
	margin-bottom : 0;
}

body > header h3 {
	margin-top : 0;
	margin-left : 34.5%;
	float: left;
	width: 66.5%;
	text-align: left;
}

@media screen and (max-width: 800px)
{
	body > header {
		height: auto;
		width: 100%
	}

	body > header #asideImg {
		float: none;
		width: 100%;
		text-align: center;
	}

	body > header h1 {
		float: none;
		width: 100%;
	}

	body > header h2 {
		display: none;
	}
	
	body > header h3 {
		display: none;
	}

	body > header #asideHeaderSocialNetwork {
		display: none;
	}
}

.clearTop {
	clear: both;
	margin: 0px 0px 0px 0px;
}


/*************************
****** MAIN SECTION ******
*************************/

#mainSection {
	clear: both;
	float: left;
	width: 75.646519333%;
	padding-left: 0.7651109%;
	padding-right: 0.7651109%;
	background-repeat : repeat-y;
	background-size : contain;
}

#mainSection {
	overflow: hidden;
}

#mainSection section {
	clear: both;
	width: 100%;
}


@media screen and (max-width: 800px)
{
	#mainSection {
		float: none;
		width: 100%;
	}
}


/*************************
******** ARTICLE *********
*************************/

#mainSection section article .block_article {
    margin-bottom: .5em;
}

#mainSection section article header, #mainSection section article .block_article, #mainSection section article footer {
	float: right;
}


#mainSection section article header, #mainSection section article footer {
	width: 86.70507231%;
}

#mainSection section article header {
	padding: 10px 0.7651109% 10px 0.7651109%;
}

#mainSection section article footer {
	padding: 5px 0.7651109% 5px 0.7651109%;
}

#mainSection section article .block_article {
	width: 88.23529411%;
	vertical-align: middle;
	padding: 5px 0 5px 0;
}

#mainSection section article header, #mainSection section article .date {
	border-top: 3px #C8C8C8 solid;
}

#mainSection section article header {
	background: #2160AD;
	color: #FFFFFF;
}

#mainSection section article header p {
	margin: 0;
}

#mainSection section article header h4{
	font-size: 1.2em;
	font-weight: bold;
	margin: 0;
	display: inline;
}

#mainSection section article header a {
	color: #FFA81E;
}

#mainSection section article footer {
	clear: both;
	background: #C8C8C8;
	color: #000000;
	margin-bottom: 25px;
}

#mainSection section article .block_article .trainerPicture {
	float: right;
	max-width: 90px;
	max-height: 90px;
	margin-left: 4px;
}

#mainSection section article .block_article .content_article {
	background: rgba(255, 255, 255, 0.72);
	border-radius: 2px;
	font-size: 1em;
	margin: 0.7651109% 0.7651109% 0% 0%;
}

#mainSection section article .block_article .content_article p {
	margin: 0;
}

#mainSection section article .content_article #HTML5 span:not(:nth-child(5))
{
	color: #E44B25;
}

#mainSection section article .content_article #HTML5 span:nth-child(5)
{
	color: white;
	text-shadow: -1px -1px #E44B25, 1px -1px #F16528, 1px 1px #F16528, -1px 1px #E44B25;
}

#mainSection section article .content_article .logo
{
	float: left;
	margin: 0 0.7651109% 5px 0.7651109%;
	height: 80px;
}

#mainSection section article .content_article #SemanticWeb
{
	color: #005B9C;
}

@media screen and (max-width: 800px)
{
	#mainSection section article header, #mainSection section article .block_article{
		float: none;
		width: auto;
	}

	#mainSection section article header {
		padding-bottom: 17px;
		text-align: center;
	}

	#mainSection section article footer { 
		float: left;
		width: 100%;
	}
}

/*************************
****** ARTICLE DATE ******
*************************/

#mainSection section article .date {
	width: 9.41176470%;
	background: #2160AD;
	color: #FFA81E;
	font-size: 0.725em;
	text-align: center;
	vertical-align: middle;
	padding-top: 0.7651109%;
	padding-bottom: 0.7651109%;
	float: left;
	margin: 0;
}

#mainSection section article .date span {
	display: block;
	font-size: 1.5em;
}

#mainSection section article .date span:first-child {
	font-weight: bold;
}

@media screen and (max-width: 800px)
{
	#mainSection {
		padding: 0;
	}

	#mainSection section article .date {
		width: auto;
		padding: 0.7651109%;
		float: left;
		margin: 0% 1.530221882% 0% 0%;
	}

	#mainSection section article footer {
		margin: 0 1.5302218% 0 0;
		width: 98.4697782%;
	}
}

/*************************
******** WIDGETS *********
*************************/


body > aside {
	padding-right: 0.7651109% 
}

body > aside section {
	margin-left : 78%;
	margin-bottom: 15px;
	border-radius: 8px;
	padding: 0px 0.7651109% 0px 0.7651109%;
}

@media screen and (max-width: 800px)
{
	body > aside:nth-child(4) {
		clear: both;
		width: 97%;
		margin: 0 auto;
	}

	body > aside:nth-child(5) {
		float: right;
		width: 48%;
		margin-top: 0.1%;
		margin-right: 1%;
	}

	body > aside section {
		margin-left : 0%;
		margin-bottom: 15px;
		border-radius: 8px;
		margin-top: 14px;
		border-radius: 8px;
	}

	#pagode {
		display: none;
	}
}

body > aside:nth-child(n+4) section{
	border: dashed 3px black;
}


body > aside > section nav
{
	padding: 0px 0.7651109% 0.7651109%;
	text-align: justify;
}

body > aside > section p
{
	padding: 0px 1.530221882% 1.530221882%;
	text-align: justify;
}

body > aside h4
{
	white-space: nowrap;
	text-decoration:underline
}

#html5apps p img
{
	float: left; 
	padding-right: 1.530221882%;
}

#html5apps p
{
	min-height: 70px;
}

#pagode
{
	border: none;
}

/********************************
********* OTHER CONTENT *********
********************************/

body > section:not(#mainSection) .sectionTitle {
	width: 30%;
	padding-left: 5%;
	display: inline;
}

body > section:not(#mainSection) .sectionTitle > a img{
	max-width: 20%;
}

body > section:not(#mainSection) .sectionTitle ul {
	padding-bottom: 0;
	padding-top: 0;
	padding-right: 0;
	list-style-type: none;
}

body > section:not(#mainSection) .sectionTitle ul li {
	float: left;
	display: block;
}

body > section:not(#mainSection) .sectionTitle ul li:not(:first-child) {
	margin-left: 2px;
}

body > section:not(#mainSection) .contentSection {
	width: 65%;
	float: right;
}

#w3devcampus {
	background: url("./separator.png") repeat-x 0 0;
	position: relative;
	z-index: 100;
}

#w3devcampus video {
	clear: both;
	display: block;
	padding-left: 1.5%;
	width: 24%;
}

#w3devcampus .contentSection ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#html5apps {
	background-color: #00daff;
	position: relative;
	z-index: 50;
}

#html5apps .contentSection {
	margin-top: -150px;
}

#html5apps p{
	margin: 0px;
}

#web25w3c20 {
	position: relative;
	z-index: 10;
}

#web25w3c20 .contentSection {
	margin-top: -150px;
}

#web25w3c20 p {
	margin-bottom: 20px;
}

body > section:not(#mainSection) {
	box-shadow: 0px 2px 2px #333;
	clear: both;
	padding-top: 20px;
	padding-bottom: 5px;
}

@media screen and (min-width: 1000px)
{
	#w3devcampus .contentSection {
		margin-top: -120px;
	}
}

@media screen and (min-width: 1300px)
{
	#w3devcampus video {
		width: 20%;
	}
}

@media screen and (max-width: 1000px) and (min-width: 800px)
{
	#w3devcampus .contentSection {
		margin-top: -100px;
	}

	#w3devcampus video {
		width: 30%;
	}
}

@media screen and (max-width: 800px)
{
	body > section:not(#mainSection) {
		margin-top: 0px;
	}

	#w3devcampus .contentSection {
		margin-top: -85px;
	}

	#html5apps .contentSection {
		margin-top: -140px;
	}

	#web25w3c20 .contentSection {
		margin-top: -120px;
	}

	#web25w3c20 p {
		margin-bottom: 0px;
	}

	#w3devcampus video {
		display: none;
	}
}

@media screen and (max-width: 800px) and (min-width: 600px)
{
	body > section:not(#mainSection) .sectionTitle ul li a img {
		max-width: 80%;
	}
}

@media screen and (max-width: 550px) and (min-width: 420px) {
	#w3devcampus .contentSection {
		margin-top: -75px;
	}
}

@media screen and (max-width: 600px)
{
	body > section:not(#mainSection) .sectionTitle ul li a img {
		max-width: 75%;
	}

	body > section:not(#mainSection) .sectionTitle {
		padding-left: 1%;
	}

	body > section:not(#mainSection) .sectionTitle ul {
		padding-left: 1%;
	}

	body > section:not(#mainSection) .sectionTitle ul li:not(:first-child) {
		margin-left: -3px;
	}
}

@media screen and (max-width: 450px)
{
	body > section:not(#mainSection) .sectionTitle ul li:nth-child(n+4) {
		position: relative;
		margin-top: 30px;
		left: -78px;
	}
}

/*************************
********* FOOTER *********
*************************/

footer {
	width: 100%;
}

footer #asideFooterSocialNetwork {
	display: none;
}

#copyright
{
	clear: both;
	text-align: center;
}

#credit
{
	width: 100%;
}

#credit img {
	max-width: 10%;
	float: left;
}

@media screen and (max-width: 800px)
{
	footer {
		font-size: 0.8em;
	}

	footer #asideFooterSocialNetwork {
		display: block;
		float: right;
	}

	footer #asideFooterSocialNetwork ul {
		padding: 0;
		margin: 0;
		list-style-type: none;
	}

	footer #asideFooterSocialNetwork ul li {
		float: left;
		display: block;
	}

	footer #asideFooterSocialNetwork ul li:not(:first-child) {
		margin-left: 8px;
	}

}