/*
 *	h t t p : / / r e g a r d e a v u e . c o m /
 *
 *  @author: julien (at) regardeavue.com
 *	@version: 4.0
 *  @licence: GNU GPLv3 - http://www.gnu.org/licenses/gpl.html
 *
*/

/* RÉGLAGES PAR DÉFAUT
   ------------------- */

* { margin: 0; padding: 0; border: none; }

html { padding-bottom: 80px; }

body {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 14px;
	background: white;
	color: black;
}

ul { list-style-type: none; }
h1 { font-size: 24px; font-weight: bold; margin-top: 0.5em; margin-bottom: 0.6em; }
h1.collectif { font-size: 48px; font-weight: bold; margin-top: 0.5em; margin-bottom: 0.6em; }
h3 { font-size: 16px; font-weight: bold; line-height: 20px; }
p { margin-bottom: 1em; }
a:link, a:visited { color: #b10; text-decoration: none; border-bottom: 1px dashed #b10; }
a:hover { color: #b10; text-decoration: none; border-bottom: 1px solid #b10; }
a.noborder:link, a.noborder:visited, a.noborder:hover { border: none; }
a.titre:link, a.titre:visited, a.titre:hover { color: black; border: none; }

input[type='submit'] { cursor: pointer; }

/* MISE EN PAGE
   ------------ */

div#cdp {
	width: 980px;
	margin: auto;
	position: relative;
}

div#logo0 { position: absolute; }

div#colg {
	width: 244px;
	padding-right: 15px;
	border-right: 1px solid white;
	position: absolute;
	left: 0;
	top: 0;
}

div#cold {
	width: 720px;
	background: white;
	padding-left: 260px;
	position: relative;
}

div#pp {
	width: 700px;
	border-top: 1px solid lightgrey;
	padding: 8px 0;
	margin: 10px;
	float: left;
}
div#pp a:link,
div#pp a:visited {
	color: black;
	font-size: 12px;
	border: none;
}
div#pp a:hover {
	color: black;
	border-bottom: 1px solid black;
}

div#pp span#prec { float: left; }
div#pp span#suiv { float: right; }

/* BARRE DE MENU
   ------------- */

div#menuspace { height: 8px; }
div#menu {
	width: 100%;
	height: 50px;
	color: white;
	text-align: center;
	background: black;
	border-bottom: 1px solid #333;
	position: fixed;
	left: 0;
	top: -42px;
}
div#edit img { vertical-align: middle; }

/* POPUP
   ----- */

div#popup {
	background: url('img/popupbkg.png');
	position: fixed;
	left: 0;
	top: 0;
	display: none;
}
div#popupdiv {
	width: 470px;
	height: 160px;
	font-size: 16px;
	line-height: 1.5em;
	padding: 40px;
	background: white;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 4px 4px 40px black;
	-webkit-box-shadow: 4px 4px 40px black;
	box-shadow: 4px 4px 40px black;
	position: absolute;
	left: 0;
	top: 0;
}
div#popupdiv div.erreur {
	color: #b10;
}
div#popupdiv input[type='submit'],
div#popupdiv a {
	color: white;
	width: 150px;
	font-size: 16px;
	padding: 6px;
	text-align: center;
	background: black;
	border: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	position: absolute;
	right: 40px;
	bottom: 40px;
}
div#popupdiv a { padding: 5px; right: 202px; }

/* BLOC "RECHERCHE"
   ---------------- */

div#recherche {
	padding: 8px 0 5px;
}
div#recherche form {
	width: 200px;
	padding: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid lightgrey;
}
div#recherche form input[type="text"] {
	width: 170px;
	color: lightgrey;
	font-size: 14px;
}
div#recherche form input[type="submit"] {
	width: 17px;
	height: 17px;
	background: url('./img/loupe.png');
}

/* BLOC "MOTS-CLEFS"
   ----------------- */

div#motsclefs {
	font-weight: bold;
	line-height: 20px;
	/* text-align: center; */
	padding: 10px 0 16px;
	/* border-top: 1px solid lightgrey; */
	border-bottom: 1px solid lightgrey;
	margin-bottom: 1em;
}
div#motsclefs div {
	line-height: 1.4em;
	padding: 4px 0;
	margin-right: 16px;
	/* white-space: nowrap; */
	display: inline;
}
div#motsclefs a.nouv:link,
div#motsclefs a.nouv:visited {
	color: #b10;
	font-weight: bold;
	border: none;
	background: none;
}
div#motsclefs a.nouv:hover {
	color: white;
	font-weight: bold;
	border: none;
	background: #b10;
}
div#motsclefs a.motclef:link,
div#motsclefs a.motclef:visited {
	color: black;
	border: none;
	background: none;
}
div#motsclefs a.motclef:hover {
	color: white;
	border: none;
	background: black;
}
div#motsclefs a.courant:link,
div#motsclefs a.courant:visited {
	color: white;
	border: none;
	background: black;
}
div#motsclefs a.courant:hover {
	color: black;
	border: none;
	background: none;
}
div#motsclefs form#suppr { display: inline-block; }
div#motsclefs form#suppr input {
	color: #b10;
	font-weight: bold;
	background: none;
}

/* BLOC "NAVIGATION"
   ----------------- */

div#navigation {
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	/* text-align: center; */
	padding: 10px 0;
	border-bottom: 1px solid lightgrey;
}
div#navigation span,
div#navigation a:link,
div#navigation a:visited {
	color: grey;
	margin: 4px 0;
	border: none;
	display: block;
}
div#navigation a.courant:link,
div#navigation a.courant:visited,
div#navigation a:hover {
	color: white;
	border: none;
	background: black;
}
div#navigation span { color: lightgrey; }

/* BLOC "CONNEXION"
   ---------------- */

div#connexion a:link,
div#connexion a:visited {
	color: black;
	font-size: 12px;
	border: none;
}
div#connexion a:hover {
	color: black;
	border-bottom: 1px solid black;
}
div#connexion a.deconnexion:link,
div#connexion a.deconnexion:visited {
	color: #b10;
	font-weight: bold;
}
div#connexion a.deconnexion:hover {
	color: #b10;
	border-bottom: 1px solid #b10;
}

/* FORMULAIRE DE CONNEXION
   ----------------------- */

form#admin {
	width: 296px;
	padding: 30px 42px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	position: absolute;
	left: 430px;
	top: 8px;
}
form#admin p { margin-bottom: 1.5em; }
form#admin span { color: #b10; }
form#admin label { color: grey; }
form#admin input {
	width: 280px;
	font-size: 24px;
	padding: 8px;
	border: 1px solid lightgrey;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	margin-top: 8px;
}
form#admin input[type='submit'] {
	color: white;
	width: 295px;
	font-size: 16px;
	padding: 16px;
	text-align: center;
	border: none;
	background: black;
	margin-top: 20px;
}

/* VIDÉO ACTIVE
   ------------ */

div#videoactive,
div#videoactive-2 {
	height: 0;
	overflow: hidden;
	position: relative;
	float: left;
}
div.avecmarge {
	background: url('./img/avecmargebkg.png') no-repeat top;
	padding-top: 20px;
	border-top: 1px solid lightgrey;
}
div#videoactive div.charg,
div#videoactive-2 div.charg {
	width: 720px;
	height: 590px;
	background: url('./img/avecmargebkg.png') no-repeat top white;
	position: relative;
	left: 0;
	top: 0;
}
div#videoactive div.suite,
div#videoactive-2 div.suite,
div#videoactive div.lirelasuite,
div#videoactive-2 div.lirelasuite {
	width: 720px;
	height: 60px;
	background: url('./img/suitebkg.png');
	cursor: pointer;
	position: absolute;
	left: 0;
	bottom: 0;
}
div#videoactive div.lirelasuite,
div#videoactive-2 div.lirelasuite {
	background: url('./img/lirelasuitebkg.png');
	display: none;
}
div#videoactive div.suite div.select,
div#videoactive-2 div.suite div.select {
	width: 40px;
	height: 60px;
	background: url('./img/selectbkg.png');
	position: absolute;
	left: 40px;
	bottom: 0;
}

/* VIGNETTES VIDÉO
   --------------- */

div.video {
	width: 220px;
	padding: 10px;
	position: relative;
	float: left;
}
div.videoimg {
	width: 220px;
	height: 165px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 1px 1px 3px grey;
	-webkit-box-shadow: 1px 1px 3px grey;
	box-shadow: 1px 1px 3px grey;
	margin-bottom: 0.5em;
	overflow: hidden;
	position: relative;
}
div.videoimg img {
	width: 294px;
	height: 165px;
	position: relative;
	left: -37px;
}
div.video form#suppr {
	width: 30px;
	height: 30px;
	text-align: center;
	background: #333;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 1px 1px 2px black;
	-webkit-box-shadow: 1px 1px 2px black;
	box-shadow: 1px 1px 2px black;
	position: absolute;
	right: 15px;
	top: 15px;
}
div.video form#suppr input {
	color: #b10;
	font-size: 24px;
	font-weight: bold;
	background: none;
	position: relative;
	bottom: 3px;
}
div.videotitre { height: 48px; }
div.videoinfos { font-size: 11px; height: 20px; position: relative; }
span.videoauteur { position: absolute; left: 0; top: 0; }
span.videodate { position: absolute; right: 0; top: 0; }
div.videomotsclefs { font-size: 11px; font-weight: bold; height: 14px; position: relative; }
div.videomotsclefs a.motclef:link,
div.videomotsclefs a.motclef:visited {
	color: white;
	border: none;
	background: #b10;
}
div.videomotsclefs a.motclef:hover {
	color: #b10;
	border: none;
	background: none;
}

/* PAGES VIDÉO
   ----------- */

div#videomotsclefs { font-weight: bold; padding: 5px 0 8px; border-bottom: 1px solid lightgrey; position: relative; }
div#videomotsclefs a.motclef:link,
div#videomotsclefs a.motclef:visited {
	color: white;
	border: none;
	background: #b10;
}
div#videomotsclefs a.motclef:hover {
	color: #b10;
	border: none;
	background: none;
}
span#videoinfos { font-weight: normal; float: right; }
div#videotitre { padding: 0 10px; }
div#videotexte { font-size: 16px; line-height: 1.4em; text-align: justify; padding: 0 10px; }
div#videotexte img { display: block; margin: 20px auto; }

/* PAGES VIDÉO (ÉDITION)
   --------------------- */

div#succes { padding: 70px 100px; }
div#succes h1 { font-weight: normal; }
div#succes ul { margin-top: 2.3em; }
div#succes li { margin-bottom: 0.5em; }

div#erreurs { color: #b10; padding: 1.8em 0 0; }
div#erreurs h3 { margin-bottom: 0.8em; }
div#erreurs ul { padding-left: 30px; }

form#edit label {
	color: grey;
	font-size: 16px;
	padding-top: 1.3em;
	padding-bottom: 0.5em;
	display: block;
}
form#edit input {
	width: 702px;
	font-size: 16px;
	padding: 8px;
	border: 1px solid lightgrey;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}
form#edit textarea {
	width: 702px;
	height: 280px;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 16px;
	padding: 8px;
	border: 1px solid lightgrey;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}
form#edit input[type='checkbox'] {
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	margin-right: 12px;
	position: relative;
	top: 2px;
}
form#edit input[type='submit'] {
	width: 340px;
	padding: 16px;
	color: white;
	text-align: center;
	background: black;
	border: none;
	margin-top: 2.3em; 
	float: right;
}
form#edit div { float: left; margin-bottom: 1.8em; }
form#edit ul { width: 240px; float: left; }
form#edit span { font-size: 16px; line-height: 30px; }
form#edit input#edittitre { font-size: 24px; }
form#edit div#editauteur { width: 510px;}
form#edit div#editauteur input { width: 360px; }
form#edit div#editdate { width: 180px; margin-left: 30px; }
form#edit div#editdate input { text-align: center; }
form#edit div#editdate input#editmois { width: 40px; }
form#edit div#editdate input#editannee { width: 80px; margin-left: 20px; }
form#edit p.encoder {
	width: 340px;
	padding: 8px 0;
	color: #555;
	font-style: italic;
	margin-top: 2.3em; 
	float: left;
}
form#edit a.encoder:link,
form#edit a.encoder:visited {
	width: 340px;
	font-size: 16px;
	color: #555;
	padding: 17px 0;
	text-align: center;
	background: url('img/encoder.png');
	border: none;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	margin-top: 2.3em; 
	display: block;
	float: left;
}

/* PAGES MOT-CLEF (ÉDITION)
   ------------------------ */

div#motclef {
	border-bottom: 1px solid lightgrey;
	margin-bottom: 20px;
}
div#motclef input[type='submit']{
	position: relative;
	left: 380px;
	margin-bottom: 30px;
	float: none;
}
div#motclef div#succes { height: 164px; }

/* 404
   --- */

div#quatrecentquatre {
	text-align: center;
	padding: 70px 100px;
}
div#quatrecentquatre h1 { font-weight: normal; }

/* AUTRES PAGES
   ------------ */

div#texte,
div#evenements div { font-size: 16px; line-height: 1.4em; text-align: justify; padding: 0; }

div#evenements div div { float: left; }