/*
	Avant tout, quelques rappel de syntaxe !

	#nom indique un id="nom"
	.nom indique un class="nom"

	la syntaxe est toujours :
	#nom {
		style:valeur;
	}
*/



/* Police de caractère utilisé sur le site */
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
}

/* L'image de fond du site */
body {
	margin: 0px;
	margin-bottom: 0px;
	background-image:url(/templates/default/images/big-bck.png);
	background-attachment:fixed;
	background-color:transparent;
	width: 100%;
}

/* Permet d'utiliser la technique des float, notamment pour le header */
.clearer { clear:both; }

/* Lien de base */
a { color: black; }
a:hover { color: black; }

/* Tout le css sur le disclaimer */
.disclaimer_titre {
	text-align:center;
	font-weight:bold;
	font-size:16px;
	margin-top:80px;
	color:#000000
}

.disclaimer_message {
	width:440px;
	border: 1px solid #643930;
	background-image:url(/templates/default/images/px-bck.png);
	background-repeat:repeat;
	overflow:auto;
	height:230px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px
}

.disclaimer_reponse {
	margin:auto;
	margin-top:20px;
	width:440px;
	text-align:center;
	padding-top:20px;
}


/* Alignement du texte, et largeur de la page total (menu inclu) */
#page {
	margin-top:70px;
	width: 998px;
	margin-left:auto;
	margin-right:auto;
	text-align: left;
}

/*
	Contenur des logos, tu peux changer la couleur de fond du header en changeant l'image ici, ainsi que sa hauteur.
	Si tu changes la hauteur, tu dois aussi changer le margin-top du #page (juste avant)
*/
#header {
	position:fixed;
	top:0;
	left:0;
	background-color:#41a62a;
	background: url(/templates/default/images/small-bck2.png) repeat-x;
	height: 70px;
	width: 100%;
	margin:0;
	padding:0;
	z-index:10;
}

/*
	Ici c'est la position du logo principale, si tu veux modifier l'image, c'est dans le fichier header.tpl (/templates/defaut/header.tpl)
	Pour modifier la position, change le pourcentage du right: 50% si tu veux le centrer par exemple
*/
#titre {
display:inline-block;margin:0;margin-top:10px;color:#fff;
	font-size:24px;
	
	}
#desc {
	display:inline-block;margin:0;padding:0;color:#fff

}
#logo {
	display:inline;float:left
}

/*
	Ici c'est la position du logo medicament, si tu veux modifier l'image, c'est dans le fichier header.tpl (/templates/defaut/)
	Pour modifier la position, change la valeur du right: 0px si tu veux le mettre tout à droite par exemple
*/
#header_ads {
	position:fixed;
	display: inline;
	top:20px;
	right:10px;
	z-index:10;
	margin:0;
	padding:0;
}

/*
	#content permet de definir la largeur du conteneur du site, la page sans le menu donc, la ou sont les vidéos et tout.
	L'addition de content et de la largeur du menu (col) + 5 doit toujours etre egal a la largeur totale de la page
*/
#content {
	float: right;
	width: 840px;
	display: inline;
	position: relative;
	visibility: inherit;
}

.thumbs {
    list-style-type: none;
    padding: 0;
    margin: 0 0 0 20px;
}

.thumbs li {
    display: block;
    width: 190px;
    height: 210px;
    float: left;
    margin-right: 15px;
}
.thumbs h2 {
    height: 30px;
    overflow: hidden;
}
.thumbs a {

    text-decoration: none;
}
.thumbs .dets, .thumbs .dets a {
    color: #42A62A;
    font-size: 8pt;
}

#video_container {
    width: 640px;
    padding-right: 190px;
    position: relative;
}

#right_container {
    position: absolute;
    right: 0;
    width: 180px;
    padding-top: 66px;
}

/*
	col: largeur du menu, et fond du menu
	Tout les elements suivants sont associé au menu.
	col_item represente une boite du menu, donc si tu veux espacer les boites, tu peux ajouter un margin-bottom:10px, ca ajoutera un espace de 10px sous toute les boites
*/
#col {
	float: left;
	width: 150px;
	display: inline;
	background-color:transparent;
}
.col_item {
	margin-bottom:10px;
}
.col_item_background {
	background: transparent url(/templates/default/images/col_top.png) no-repeat;
	padding-top: 10px;
	padding-bottom:10px;
}
.col_item_content {
	margin-top: 10px;
	margin-right: 0px;
	margin-left: 7px;
	margin-bottom: 10px;
}
.col_item_content_tag {
	margin-top: 10px;
	margin-right: 0px;
	margin-left: 8px;
	margin-bottom: 10px;
}
/* Ici le titre des boites */
.col_title {
	margin-top: 10px;
	margin-right: 7px;
	margin-left: 7px;
	font-weight: bold;
}
.col_title img {padding-top:0px;margin-right:4px;float:left}
/* vignette dans le menu */
.img_menu {
	background: #f4f4f4;
	border: 1px solid #000;
	padding: 0px;
	margin-bottom:4px;
}

/* Les deux elements suivants sont les liens du menu, tag compris, tu peux les modifier ici, ajouter du soulignement, changer la font, la couleur etc */
.col_item_content a { color:black; font-size:1.1em; }
.col_item_content_tag a { color:black; font-size:1em; }
.col_item_content a:hover {	color:red; }


/*
	Tout les elements suivant jusqu'a footer permet la mise en page des cases video
	.plug etant l'element principale, la boite en elle meme. Tu peux changer sa largeur, mais elle ne doit pas depaser la taille de #content
	Les noms des classes sont très explicites, je ne pense pas avoir à te les décrire.
*/
.plug {
	width: 600px;
	margin-right: 5px;
	border: 1px solid #41A62A;
	margin-bottom: 0px;
	background: url(../images/px-bck.png) repeat ;
    height: auto !important;
    height: 150px;
    min-height: 150px;

}
.col_item_contentb p {
	margin:0;
	padding:0;
	margin-top:3px;
	margin-bottom:3px;
}
.descrip {
	padding: 5px ;
	width: 590px;
	border: 1px solid #41A62A;
	margin-bottom: 5px;
	margin-right:5px;
	background: url(../images/px-bck.png) repeat ;

}
.plug_details {
	background: #41A62A;
	width: 600px;
	border: 1px solid #41A62A;
	margin-bottom: 10px;
	font-size:10pt;
	font-weight:normal;
	text-align:right;

}

.plug_details p {
	margin:0;
	padding:0;
	margin-top:3px;
	margin-bottom:3px;
}

.plug_content {
	text-align: left;
	vertical-align: text-top;
	display: inline;
}
.plug_content img {
	margin: 5px;
	float: left;
	display: inline;
}

/* Ici les miniatures des images dans les cases de plug */
.img_plug {
	background: #f4f4f4;
	border: 1px solid #000;
	padding: 0px;
}

/* Pas de surprise ici, le footer */
.footer {
	line-height: 30px;
	text-align: center;
	height: 30px;
	border-top: 1px solid #666666;
	margin-top: 10px;
}

/* ici les h2, ce sont notamment la ou sont les titres des videos dans les cases plug */
h2 {
  color:#9e9e9e;
  font-size:9pt;
  font-weight:bold;
  margin-top:0;
  margin-bottom:0px;
  font-variant:small-caps;
}

h3 {
  color:#000000;
  font-size:10pt;
  font-weight:normal;
  margin-top:0;
  margin-bottom:2px;
}

.description { 
	color:#000000;
    font-size:10pt;
  font-weight:normal;
  margin-top:0;
  margin-bottom:2px;
  }
/* Ici c'est le message d'erreur du script, normalement, tu ne devrais jamais le voir (si je fais bien mon boulot :D) */
.messageStackWarning {
  background-color:#F5F5F5;
  font-weight: bold;
  border: 1px solid #FF0000;
  color: red;
}

/* container permet de faire en sorte que les videos ne passe pas par dessus le header  */
#code_video {
	position:relative;
	z-index:1;
}

/* Ici le css de la pagination, tu peux changer la dedans la police, la grandeur, enfin tout quoi */
div.pagination {
	width:100%;
	text-align:center;
	font-size:2em;
	margin-top:10px;
	margin-bottom:20px;
    clear: both;
}

/*
	Les trois elements suivant sont les hovers pour les titres / categories et pub.
	Ainsi, si tu veux simplement ajouter un hover rouge sur n'impote quelle lien, ajoute lui simplement la class lien_video
*/
a.lien_video:hover {
	color:red;
}

div.pub_video a:hover {
	color:black;
}

div.pub_video a {
	width:100%;
	color:red;
	text-align:center;
	margin-bottom:30px;
}

fieldset {
	background-color:#FFF;
}

/* div qui contient la video sur la page vdeo */
#code_video {
	margin:auto;
	margin-bottom:20px;
    width: 640px;
    height: 390px;
    position: relative;
}
#player_catcher {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px;
    height: 360px;
    background: #43A52C url(/templates/default/images/catcher_player_bg.png) bottom left repeat-x;
    display: none;
}

#player_catcher div.top{
    background: #191919;
    height: 60px;
    line-height: 60px;
    font-family: "Trebuchet MS", Arial;
    font-size: 18pt;
    text-align: center;
    color: white;
    border-bottom: 1px solid #CACACA;
    margin-bottom: 60px;
}

/* Boite de la recherche */
.bouton_ok {
	border: 1px solid black;
	background-color: #6699BB;
	color:#FFFFFF;
}

.input_search {
	width:70px;
}

/* Tableau contenant la liste des tags */
#tableau_tags {
	width: 600px;
	margin-right: 5px;
	border: 1px solid #41A62A;
	margin-bottom: 0px;
	background: url(../images/px-bck.png) repeat ;
	border-collapse: collapse;
}

#tableau_tags td {
	text-align:center;
	border:1px solid #41A62A;
}

/* css spécifiques à la page video */

/* centrage du titre */
h1.titre_video {
	width:100%;
    font-size: 20pt;
}
h1.titre_video a {
    text-decoration: none;
}

.cloud {
	display:block;
	float:left;
	width:110px;
	padding:4px;
}

a.lien_tag:hover {
	color:red;
}