*, html {
    margin: 0px;
    padding: 0px;
}

body
{
	color: #333;
	font-family: "DejaVu Sans", Verdana, Geneva, sans-serif;
    margin: 0px;
    padding: 0px;
	background-color: #2c3e50;
}

#nav
{
	font-family: "Ubuntu Condensed","Segoe UI",Verdana,Helvetica,Sans-Serif;
	background-color: #6287c0;
	color: #fff;
	font-weight: 100;
	padding: 0;
	width: 100%;
  height: 5.1em;
  min-height: 5.1em;
  margin: 0;
	font-size: 1.2em;
}

#nav a
{
	color: #eee;
  background-color: #6287c0;
	text-decoration: none;
    outline: 0;
    margin: 0;
    padding: 0;
}

#nav #imgBan
{
	padding: 0;
  padding-left: 1em;
  padding-right: 1em;
	margin: 0;
  height: 100%;
}

#nav #imgBan #imgBanPseudo
{
  height: 100%;
}

#nav #imgBan #imgBanPseudo, #nav #imgBan img
{
  	display: inline-block;
  	vertical-align: middle;
}

#nav #imgBan img
{
	padding: 0;
	margin: 0;
}

#nav ul, #nav #imgBan
{
	display: inline-block;
	vertical-align: bottom;
}

#nav ul li
{
	display: inline-block;
	margin-right: 1em;
	padding: 1em 1em 1.5em 1em;
	border-bottom: solid 0.5em #6287c0;
}

#nav ul li#nav_button_selected
{
  border-bottom: solid 0.5em #4f6a94;
}
#nav ul li#nav_button_selected:hover
{
  border-bottom: solid 0.5em #66a2ff;
}

#nav ul li:hover
{
  color: white;
	background-color: #6287c0;
	border-bottom: solid 0.5em #66a2ff;
}

#nav ul li:active
{
	color: #2980b9;
    background-color: #2c3e50;
}

#nav #bt_mobile_menu
{
  display: none;
  padding: 1em;
  cursor: pointer;
}

@media only screen and (max-width: 871px)
{
  /* For mobile phones: */
  #nav
  {
    height: auto;
    min-height: 3.5em;
    padding-top: 0.5em;
    padding-bottom: 0.0em;
  }

  #nav ul, #nav #imgBan
  {
  	display: block;
  	vertical-align: bottom;
    text-align: center;
  }

  #nav ul
  {
    display: none;
  	background-color: #6287c0;
    position: absolute;
    left: 0;
    right: 0;
    top: 3.8em;
    box-shadow: 0px 0.3em 0.2em #00000044;
  }

  #nav #imgBan, #nav #bt_mobile_menu
  {
    display: inline-block;
    text-align: left;
  	vertical-align: middle;
  }

  #nav ul li
  {
      display: block;
      width: 100%;
    	margin-right: 0;
    	padding: 0.25em 0em 0.5em 0em;
  }
}

#footer
{
    background-color: #2c3e50;
    padding-top: 2em;
    padding-bottom: 12em;
    margin: auto;
}

#footer p
{
    text-align: center;
    color: white;
    font-size: 0.75em;
}

#body_content
{
  background-image: url(../imagesSite/bg_paper.png);
  background-repeat: repeat;
	padding-top: 1em;
  padding-bottom: 2em;
	background-color: #efefef;
}

#content
{
	background: #fff;
	width: 820px;
  max-width: 99%;
	margin: auto;
  box-shadow: 0px 0px 1.0em #ddd;
  border-bottom-left-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
}

#content #image_title
{
  /*
  margin-left: -20px;
  margin-top: -20px;
  max-width: 860px;*/
  max-width:100%;
  min-width: 100%;
  text-align: left;
  box-shadow: 0 0 0 #fff;
}

#content #image_title, #content
{
  border-top-left-radius: 0.25em;
  border-top-right-radius: 0.25em;
}

#home_body #content
{
    border: none;
    padding-bottom: 50px;
    margin-bottom: 100px;
}

#content .antiS
{
    display: none;
}

.tutorialList
{
	margin: 1em;

  padding-bottom: 1em;
}

.tutorialList img
{
    max-width: 200px;
    max-width: 50%;
    max-height: 200px;
    vertical-align: middle;
    text-align: center;
    margin: 0.5em;
    box-shadow: 0 0 0.5em #ccc;
    border-radius: 0.25em;
}

.tutorialList ul li
{
	list-style-type: none;
	padding: 1em;
	border: solid 1px #fff;
	margin-bottom: 0.1em;
  border-radius: 0.25em;
}

.tutorialList ul li:hover
{
	border: solid 1px #3498db;
}

.tutorialList ul a
{
	color: #333;
	text-decoration: none;
}

.tutorialList ul li img, .tutorialList ul li .titleDesc
{
	display: inline-block;
}

.tutorialList ul li .titleDesc
{
	margin-left: 2em;
	vertical-align: top;
	max-width: 500px;
}

.tutorialList ul li .titleDesc h3
{
	font-family: Helvetica,Arial;
	color: #2980b9;
	font-size: 1.5em;
}

@media only screen and (max-width: 768px)
{
  /* For mobile phones: */
  tutorialList
  {
  	margin: 0;
  }

  .tutorialList img
  {
      vertical-align: middle;
      text-align: center;
      margin: 0;
      margin-bottom: 0.5em;
  }

  .tutorialList ul li
  {
  	list-style-type: none;
  	padding: 0;
  	border: solid 1px #fff;
  	margin-bottom: 1em;
  	border-bottom: solid 1px #eee;
  }

  .tutorialList ul a
  {
  	color: #333;
  	text-decoration: none;
  }

  .tutorialList ul li img, .tutorialList ul li .titleDesc
  {
  	display: block;
  }

  .tutorialList ul li .titleDesc
  {
  	margin-left: 0;
  	vertical-align: top;
    max-width:100%;
  }
}

.article
{
  padding-top: 1em;
  margin-left: 2.5%;
  margin-right: 2.5%;
  padding-bottom: 1em;
}

.article_details
{
  margin-top: 1.0em;
  margin-bottom: 1.0em;
  font-size: 0.8em;
}

.article_tag
{
  margin-right: 1em;
  padding: 0.4em 0.75em 0.4em 0.75em;
  border-radius: 0.5em;
  background-color: #a2a2a2;
  color: #EEE;
}

.article_date
{
  color: #CCC;
}

.article .title
{
	font-family: Helvetica,Arial;
	color: #2980b9;
	margin-bottom: 1em;
    margin-top:1em;
}

.article .title h1
{
	font-size: 2em;
	border-bottom: solid 4px #2980b9;
	font-weight: bold;
    margin-top: 0;
    margin-left: 0em;
    margin-bottom: 0;
}

#home_body .article .title h1
{
    border: none;
}

.article .title h6
{
	font-weight: normal;
	text-align: right;
}

.article h1, .article h2, .article h3, .article h4, .article h5
{
	font-family: Helvetica,Arial;
	color: #2980b9;
	font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.article h2
{
	font-size: 1.5em;
	margin-bottom: 0.5em;
}

.article p
{
	color: #333;
  margin-top: 1em;
	margin-bottom: 1em;
  margin-left: 1em;
  margin-right: 1em;
	font-size: 1em;
}

.article table
{
  color: #333;
  font-family: Helvetica, Arial, sans-serif;
  border-collapse: collapse;
  border-spacing: 0;

  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;
}

.article td, .article th
{
  border: 1px solid #bbb; /* No more visible border */
  height: 0.5em;
  width: 0.5em;
  padding: 1em;
  /*transition: all 0.3s; *//* Simple transition for hover effect */
}

.article th
{
  background: #DFDFDF; /* Darken header a bit */
  font-weight: bold;
}

.article td
{
  background: #FAFAFA;
  text-align: center;
}

/* Cells in even rows (2,4,6...) are one color */
.article tr:nth-child(even) td
{
  background: #F1F1F1;
}

/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
.article tr:nth-child(odd) td
{
  background: #FEFEFE;
}
/*
.article tr td:hover
{
  background: #666; color: #FFF;
}*/ /* Hover cell effect! */

.article p a, .article ul a
{
	color: #2980b9;
	text-decoration: underline;
}

.article ul {
    margin-left: 3em;
    margin-right: 1em;
}

.article li {
    margin-bottom: 0.5em;
}

.article li:nth-child(1) {
    margin-top: 0.5em;
}

.article code {
    background-color: #f2f2f2;
    overflow: auto;
	padding: 1.2em 2em 1.2em 1em;
    border: solid 1px #d0d3d7;
    border-radius: 1em;
    margin-left: 1em;
    margin-right: 1em;
}

.article p code,
.article span code,
.article li code,
.article h1 code,
.article h2 code,
.article h3 code,
.article h4 code,
.article h5 code,
.article h6 code,
.article h7 code
{
  padding: 0.25em 0.6em 0.25em 0.6em;
  margin-left: 0.2em;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.2em;
}

.article img
{
    display: block;
    vertical-align: middle;
    text-align: center;
    margin: auto;
    max-width: 790px;
    max-height: 790px;
    max-width: 90%;
    box-shadow: 0px 0px 1.0em #eee;
}


.button
{
  display: inline-block;
  padding: 0.5em 0.75em 0.5em 0.75em;
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #4f6a94;
  text-decoration: none;
  font-weight: 700;
  border-radius: 0.25em;
  color: #FFF;
}

.button:hover
{
  background-color: #6287c0;
}