/* CSS Document */
*{
    margin: 0px;
    padding: 0px;
}

html, body, p, table, a {
    font-family: Arial, Helvetica, sans-serif;
    color:#000;
    font-size:15px;
    font-variant:small-caps;
    font-weight:800;
}
body{
    background-color:#fff;
}

div.page{
    width: 980px;
    margin: 0px auto;
}

/*Menu*/

h1#logo{
    margin: 0px auto;
    text-indent: -8000px;
    background-image: url(../images/joepaps.jpg);
    background-repeat: no-repeat;
    background-position: center;
    height: 305px;
    width: 500px;

}

ul.nav a{
  color: #fff;
  font-size: 25px;
}


.page li{
    display:inline;
    list-style: none;
}

a{
    text-decoration: none;

}
.nav a, #projectFilter a {
    margin-right: 8px;
    margin-left: 8px;
}

#projectFilter {
    margin: 3px 0 5px 0;
}

.page a#end{
    margin-right: 0px;
}
.page a:hover{
    color: whitesmoke;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-variant:small-caps;
}

h2#titre{
    padding-top: 20px;
    padding-left: 30px;
    height:46px;
    margin: 0px auto;
    margin-top: 0px;
    background-color: black;
    color: white;
}

.active {
    text-decoration: underline;
}

/*Contenu de la page*/

h3{
    background-color:#000;
    color: #EADAC1;
    font-family:Georgia, "Times New Roman", Times, serif;
    width: 170px;
    padding: 8px;
    font-variant:small-caps;
    font-size: 15px;
    line-height:13px;
    font-weight:100;
}

p{
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 0px;
    margin-bottom: 20px;
    text-align:justify;
    font-weight:bold;

}

table{
    margin-left: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 400px;
    float:left;


}

div#contenu{
    margin: 0px auto;
    width:934px;
}


div#footer{
    clear: both;
    height: 20px;
    background-color:#fff;
    width: 918px;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    /*padding: 8px;*/
    font-variant:small-caps;
    font-size: 10px;
    text-align:center;
    margin: 0px auto;
    border-top: dotted 1px #000;
}

div#footer a {
    font-size: 12px;
    color: #414141;
    padding-bottom: 30px;
}

div#footer #bandcamp {
    margin-left: 10px;
    margin-bottom: -2px;
    /* black and white */
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

div#footer .fa {
    margin-top: 30px;
    font-size: 30px;
    padding: 10px;
}

div#footer .fa:hover {
    color: #000;
}

/* page BIO */

.left {
    display:inline-block;
    padding-top: 10px;
    width: 60%;
    margin-right: 8px;
    vertical-align: top;
}

.right {
    display:inline-block;
    vertical-align: bottom;
    width: 35%;
    text-align: right;
}


/* ---------------------------------------------------------------------------- */
/* OLD app.css from TADAMI */



/* -----------------------------------------
   Projets sur home
----------------------------------------- */

.proj{
    font-size: 0px; /* cela résolu le bug de l'espace en dessus des projets qui décale tous les projets */
    float: left;
    clear: right;
    margin: 0px;
    padding: 0px;
    position:relative;
    overflow:hidden; /* cause problème d'alignement peut-être, à suivre... */
    width: 467px;
    height: 267px;
}

/* pour le titre et la description du projet */
.img-overlay{
    background-color:#000;
    bottom:0;
    color:#fff;
    opacity:0;
    filter: alpha(opacity = 0);
    position:absolute;
    width:100%;
    height: 50%;
    max-height: 50%;
    z-index:1000;
    overflow: hidden;
}

/* contenu des textes des projets */
.img-overlay h4, .img-overlay p{
    padding: 10px 7px 3px 7px;
    color: white;
    font-size: 25px;
    margin: 0;
}
.img-overlay p{
	font-size: 20px;
	padding-top: 2px;
}

.proj:hover .img-overlay {
    opacity:0.75;
    filter: alpha(opacity = 75);
    transition:opacity 0.25s;
    -moz-transition:opacity 0.25s;
    -webkit-transition:opacity 0.25s;
}

.proj:hover {
    cursor: pointer;
}


/* -----------------------------------------
   Contact
----------------------------------------- */

#contact {
    margin-top: 10px;
    margin-bottom: 10px;
}

#yw0_button {
    display: block;
    margin: 5px;
    margin-left: 10px;
}


/* -----------------------------------------
   Projet Vue détaillée
----------------------------------------- */


#projVueTitre, #projVueType, #projVueDescription, #projVueAuteur{
    margin: 10px;
    text-transform: uppercase;
}

#projVueHeader {
    width: 100%;
    background-color: black;
    color: white;
    font-size: 40px;
}

#projVueType {
    font-size: 20px;
}

#projVueTitre {
    font-size: 30px;
}

#projVueDescription {

}

#projVueAuteur {
    font-size: 12px;
}

.mediaDescription {
    padding: 10px 0 10px 22px;
    font-size: 15px;
    color: white;
    text-transform: uppercase;
}


/* -----------------------------------------
   Admin Zone (Gestion projet et media)
----------------------------------------- */

#sidebar {
    /* position: fixed;
    top: 40px;
    left: 50px;
    */
    background-color : red;
    float: left;
}

h1 {
    font-size: 25px;
    margin-top: 15px;
    margin-bottom: 25px;
}

/* -----------------------------------------
    Formulaire Contact
----------------------------------------- */

/* borrowed to foundation */
input[type="submit"], input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    background-color: #fff;
    font-family: inherit;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.75);
    display: block;
    font-size: 0.875em;
    margin: 0 0 1em 0;
    padding: 0.5em;
    height: 2.3125em;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: -webkit-box-shadow 0.45s,border-color 0.45s ease-in-out;
    -moz-transition: -moz-box-shadow 0.45s,border-color 0.45s ease-in-out;
    transition: box-shadow 0.45s,border-color 0.45s ease-in-out;
}

input[type="submit"] {
    font-weight: bold;
}

.errorMessage {
    font-size: 1.2em;
    color: white;
    background-color: red;
    padding: 5px;
    margin-bottom: 20px;
}


/* -----------------------------------------
    Formulaire Zone d'administration
----------------------------------------- */

div.form label
{
    font-size: 1.2em;
}

div.form

div.form .errorSummary
{
    border: 2px solid #C00;
    padding: 7px 7px 12px 7px;
    margin: 0 0 20px 0;
    background: #FEE;
    font-size: 0.9em;
}

div.form .errorMessage
{
    color: white;
    font-size: 0.9em;
}

div.form .errorSummary p
{
    margin: 0;
    padding: 5px;
}

div.form .errorSummary ul
{
    margin: 0;
    padding: 0 0 0 20px;
}


div.wide.form .row
{
    clear: left;
}

div.wide.form .buttons, div.wide.form .hint, div.wide.form .errorMessage
{
    clear: left;
    padding-left: 110px;
}
div.form span.required
{
    color: red;
}

/**
 * Responsive design
 */

/* tablet */
@media all and (max-width: 1024px) {

}

/* mobile phone */
@media screen and (max-width: 768px) {

  h1#logo {
    width: 100%;
    margin: 0 auto;
    background-size: 95%;
  }
  /* resize all elements to the available width */
  div.page, div#contenu,  div#content, div#footer, table {
    width: 100%;
  }

  h2#titre {
    width: 100%;
    padding-left: 0;
  }

  #projectFilter a {
    font-size: 18px;
  }

  #projectFilter a:active, #projectFilter a:hover {
    color: black;
    text-decoration: underline;
  }

  .proj, .proj img, .proj.img-overlay {
    width: 100%;
    height: auto;
  }

  .img-overlay h4, .img-overlay p {
    font-size: 17px;
  }

  /* bio & contact page */
  div.left {
    padding-left: 10px;
    width: 95%;
    float: left;
  }

  div.right {
    width: 95%;
    float: left;
  }

}