/* CSS Document */
/* Initial version made by [VS] vincent.spano@idiap.ch */
/* date: 12.05.2012 */
/* find below the "div" structure

maincontainer
	headercontainer
		logocontainer
		portraitcontainer
    headercontainer
        
	yourname
	
	middlecontainer
		contentcontainer
    middlecontainer
        
	footercontainer
      footertxt
    footercontainer
    
maincontainer
*/

body {
  background-color: #fff;
  margin: 0em 0em 0em 0em;
  color: #636363;
  font-family: Arial, Helvetica, Verdana, "Lucida Grande", Lucida sans-serif;
  font-size: 0.8em;
  text-align: justify;
  line-height: 1.5;
}
img {
  border: 0;
}
/*this is the style for the main container with a fixed size*/
#maincontainer {
  width: 100%;
  margin: 0em auto;
  float: left;
  background-color: white;
}
/*this is the style for the container header*/
#headercontainer {
  width: 100%;
  background-color: transparent;
  margin: 0em;
  padding: 0.5em 0em 0em 0em;
  clear: both;
}
/*this is the style for the container banner*/
#logocontainer {
  height: 100px;
  padding: 0.8em 0em 0em 0em;
  clear: both;
  background-color: transparent;
  border-bottom: 1px solid #ccc;
}
/*this is the style for the container portrait*/
#portraitcontainer {
  padding: 1.8em 0em 0.5em 5em;
  clear: both;
  background-color: white;
}
.logo-img {
  width: 300px;
  height: 80px;
  padding: 0em 0em 0em 2em;
  float: left;
  clear: both;
  background-color: yellow;
}
/*this is the style for the text 'user name' located in the banner*/
#yourname {
  clear: both;
  color: #336699;
  font-size: 16px;
  padding: 0em 0em 0em 4em;
  font-family: Arial, Helvetica, Verdana, "Lucida Grande", Lucida sans-serif;
  font-style: italic;
  font-weight: bold;
}
/*this is the style for the midlle container*/
#middlecontainer {
  clear: both;
  background-color: white;
  margin: 0em;
  padding: 0em;
}
/*this is the style for the container content*/
#contentcontainer {
  padding: 0em 0em 0em 0em;
  margin: 0em 2em 2em 6em;
  float: left;
  clear: both;
  background-color: transpaent;
}
/*this is the style for the container footer*/
#footercontainer {
  clear: both;
  width: auto;
  padding: 0.5em 0em 0.1em 0em;
  background-color: #008bcc;
}
#footertxt {
  width: auto;
  text-align: center;
  margin: 0em 0em 0em 0em;
  color: white;
  font-size: 9px;
}
#footertxt a {
  color: white;
}
.imgportrait {
  border-radius: 10px;
  background: #ccc;
  padding: 1px;
}

/**this is for the mobile screen smaller than 1280px**/
@media only screen and (max-width: 1280px) {
  #contentcontainer {
    margin: 0em 0.8em 2em 0.8em;
    padding: 0em;
    width: 95%;
    word-wrap: break-word;
    background-color: white;
  }

  .logo-img {
    padding: 0em 0em 0em 0em;
  }
  /*this is the style for the container portrait*/
  #portraitcontainer {
    padding: 1.8em 0em 0.5em 0.5em;
  }
  /*this is the style for the text 'user name' located in the banner*/
  #yourname {
    padding: 0em 0em 0em 0.5em;
  }
}