/* Responsive design basic */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	margin:0;
	padding:0;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* general css */
body {
	line-height: 1.6em;
	color: #1C1C1C;
	font-family:Myriad Pro;
font-weight: bold;
}
a{
text-decoration:none;
color:black;
}
/* button at the top of each page */
#createbutton{
width:50%;
float:right;
margin-top:2em;
text-align:right;
}
#createbutton ul  li{
display:inline;
margin:1em;
text-align:right;
}
#createbutton ul li a{
color: #3399cc;
font-family:Myriad Pro;
font-weight: bold;
text-decoration:none;
font-size:32px;
border: solid 2px;
border-color: #3399cc;
border-radius:20px;
padding:4px;
}
/* login button at the top of the page */
#login{
width: 100%;
float: right;
text-align:right;
margin-right:2em;
margin:2.5em;

}
#login a{
color: #3399cc;
font-family:Myriad Pro;
font-weight: bold;
text-decoration:none;
font-size:32px;
border: solid 2px;
border-color: #3399cc;
border-radius:20px;
padding:4px;
}
/* button at the top left corner*/
#applicationname{
width:30%;
float:left;
margin:2em;
}
#applicationname h2 a{
color: #3399cc;
font-family:Myriad Pro;
font-weight: bold;
text-decoration:none;
font-size:2em;
border: solid 2px;
border-color: #3399cc;
border-radius:20px;
padding:4px;

}
/* first half of my index page*/
#firsthalf{
clear:both;
margin:0px;
padding:0px;
height:800px;
width: 100%;
background-image: url(imagestory/home.jpg);
opacity:0.75;
}
#firsthalf h1{
font-size:60px;
color: #3399cc;
line-height:1.5em;
width:100%;

}
#firsthalf h2{
font-size:30px;
color: white;
line-height:2em;
width:100%;
}
/* login box and create an account box */
#box{
margin-left: auto;
margin-right: auto;
padding-top:100px;
width:50%;
text-align:center;
}
#createaccount{
background-color:rgba(0, 0, 0, 0.5);
color:white;
padding: 2em;
font-size:20px;
}
#createaccount ul {
width:50%;
float:left;
margin: 0 auto;
}
#createaccount #accountlist {
width:80%;
margin:0 auto;

}
#createaccount ul li{
margin:1em;
text-align:left;
}
/* CSS of every validation button*/

#validationbutton{
margin-top:2em;
padding: 1em 5em;
background-color: #3399cc;
color:white;
border-radius : 5px;
font-family:Myriad Pro;
font-size:20px;
font-weight:bold;
}
#delete{
background-color:red;
}
/* second half of my index page */
#secondhalf{
margin-left: auto;
margin-right: auto;
width:80%;
margin-bottom:100px;
}
#secondhalf h2{
margin:1em 0;
text-align:center;
font-size:3em;
}

#secondhalf #storyright{
width:45%;
float:right;
}
#secondhalf img{
display:block;
width:153px;
float:left;
margin-top:0;
}
#secondhalf .storypreview{
display:block;
float:left;
width:60%;
margin-left:1em;

}
#secondhalf .storypreview h3{
font-size:1.5em;

}
#secondhalf #storyleft{
width:45%;
float:left;
}

/* footer */
footer{
clear:both;
border-top: 2px solid;
width:80%;
margin-left: auto;
margin-right: auto;
margin-top:100px;
padding-top:10px;
}
footer ul li{
display:inline;
margin:0 1em;
}
footer ul{
width:60%;
margin:0 auto;
text-align:center;
}
footer ul li a{
color:#3399cc;
}
#footer{
display:block;
width:80%;
margin-left: auto;
margin-right: auto;
}
/* first half of the profile */
#profileup{
margin-top:100px;
width:50%;
margin-left: auto;
margin-right: auto;
line-height:3em;
}
#profileup img{
display:block;

margin:1em auto;

}
#profileup p{
text-align:center;
margin-left: auto;
margin-right: auto;
width:70%;
color: #3399cc;
}
#profileup h2{
text-align:center;
color: #3399cc;
font-size:32px;
}
/* CSS of author block at the top of a story*/

#authorcolumn{
width:50%;
margin:1.5em auto;
}
#authorcolumn h2{
font-size:20px;
text-align:center;
}
#authorcolumn img{
width:90px;
height:60px;
display:block;
margin-left: auto;
margin-right: auto;
text-align:center;
}
/* CSS of the story*/
#story{
width:100%;
float:left;
}
#story h1{
font-size:3em;
text-align:center;
line-height:1em;
}
/* CSS of the top of the allstories page*/
#allstories #up{
clear:both;
margin:0px;
padding:0px;
height:588px;
width: 100%;
background-image: url(imagestory/allstory.jpg);
opacity:0.75;
}
/* CSS of the middle of the allstories page*/
#allstories #middle{
margin-top:1em;
width: 80%;
margin-left:auto;
margin-right:auto;
}
#allstories #middle ul li{
display: inline;
margin:0.2em;
font-size:40px;
text-align:center;
}
#allstories #middle ul {
text-align:center;
}
#allstories #middle ul li a{
color:black;
font-size:30px;
padding:0.2em;
}
#allstories #middle ul li .activate a{
color:white;
background-color:black;
font-size:30px;
}
#allstories #middle ul{
margin:1em 0;
display:block;
margin-left:auto;
margin-right:auto;
}
#allstories #middle h1{
font-size:45px;
text-align:center;
margin-bottom:1em;
}
/* CSS of the middle of the allstories page*/
 #bottom{
margin-left:auto;
margin-right:auto;
width:80%;
border-top: 2px solid;
padding-top:10px;
}
 #bottom h2{
text-align:center;
font-size:3em;
margin-top:20px;
}
#bottom .onestory{
width:100%;
width:80%;
display:block;
height:110px;
margin: 2em;
}

#bottom img{
display:block;
float:left;
}

#bottom  h3{
font-size:20px;
display:block;
float:left;
margin: 2em;
}

#create{
clear:both;
width:90%;
margin:20em 2em;
}
#create form{
clear:both;
}
/* the page to Change your profile picture  */
#addpicture{
width:50%;
margin-left:auto;
margin-right:auto;
clear:both;
margin:7em auto;
text-align:center;
line-height:4em;

}
/* the text of this page */
#addpicture h1{
font-size:20px;
}
/* slide image in one story */
.slide {
	height: 1000px;
	padding-top:100px;
}
/* Text in one story */
#story p{
display:block;
width:50%;
color:black;
margin-right:auto;
margin-left:auto;
text-align:justify;
font-size:1.2em;
padding:20px 0px;
font-weight: normal;
}
/* Embed code in one story */
#story iframe{
display:block;
margin-right:auto;
margin-left:auto;

}

/* Gestion du contenu */
.slide_inside {
	width: 980px;
	margin: 0 auto;
}

#slide  .slide_inside {
	text-align:center;
}
/* edit des articles */

#edit ul li{
text-align:center;
display:inline;
margin:2em;
}
#edit ul {
text-align:center;
}
#edit{
margin-bottom:2em;
}
.twitter-share-button{
margin-bottom:2em;
}
/*About Page*/

#slide1, #slide2, #slide3, #slide4, #slide5  {
	height: 1000px;
	padding-top:10px;
}

#slide1 {
	background:url(about/1.jpg) center 0 no-repeat fixed;	
}

#slide2 {
	background: url(about/2.jpg) center 0 no-repeat fixed;
}

#slide3 {
	background: url(about/3.jpg) center 0 no-repeat fixed;
}
#slide4 {
	background: url(about/4.jpg) center 0 no-repeat fixed;
}
#slide5 {
	background: url(about/5.jpg) center 0 no-repeat fixed;
}


.slide_inside {
	width: 980px;
	margin: 200px auto;
}

#slide1  .slide_inside {
	text-align:center;
}

#slide2 .slide_inside  {
background-color: rgba(0, 0, 0, 0.5);
	width: 500px;
	text-align:justify;
	padding:2em;
}

#slide3 .slide_inside {
	background-color: rgba(0, 0, 0, 0.5);
	float:right;
	width:50%;
	margin-top:100px;
	margin-right:50px;
	padding:50px;
}
#about{
color:white;
}
#about p{
margin:1em;
font-weight:normal;
}
#about h1{
margin-top:1.5em;
font-size:80px;
color: #3399cc;
line-height:1.5em;
width:100%;

}

#about h2{
font-size:40px;
color: white;
line-height:2em;
width:100%;
}
#applicationname h3 a{
color: #3399cc;
font-family:Myriad Pro;
font-weight: bold;
text-decoration:none;
font-size:2em;
border: solid 2px;
border-color: #3399cc;
border-radius:20px;
padding:4px;

}