/*
Theme Name: turny
Description:thème mairie de Turny
Version: 1.0
Author: taz
Base theme: Magazine Basic
Tags: right-sidebar,left-sidebar,fixed-width,three-columns,two-columns,white,custom-header,theme-options

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

/* Couleurs Turny:
#216DDF----> bleu foncé
#61ABF0----> bleu clair
#F8952B----> orange
#F8BD31----> jaune
#25B34B----> vert

si tu as besoin, code du noir et du blanc:
#000000----> noir
#FFFFFF----> blanc

*/

/* syntaxe des arguments:
chaque ID s'engage via le sigle # (diese ) .
L'ID correspond au nom numérique d'un élément, par exemple, #title comme tu t'en doute correspond au titre. Un ID est toujours unique, tu le retrouve forcement sur plusieurs fichiers,
mais pas plusieurs fois dans UN fichier.
Un ID peut avoir des sous ID. Ceux ci s'appellent également via le sigle #. Lorsque ce cas se présente, il y a un ordre à respecter.
L'exemple le plus simple est une liste:

#navigation ul  ---> la première instruction informera le parseur du navigateur qu'il va avoir a traiter une liste .
		#navigation ul ---> la seconde va déterminé le premier niveau de la liste, c'est à dire tes boutons qui ouvriront leur liste respective .
			#navigation ul li ---> la troisième détermine la structure de la liste, d'où le "li" .
				#navigation ul a---> cette instruction agit sur le texte des boutons (menu supérieur) .
					#navigation ul a:hover ---> cette instruction détermine le comportement du texte des boutons supérieurs au passage de la souris, ou du clic, 
												ou une fois cliqué, tout dépend des comportements que l'on veut attribuer .
						#navigation ul li a--->cette instruction agit sur le texte des listes (menu inférieur) .
							#navigation ul li a:hover--->cette dernière instruction détermine le comportement du texte des listes au passage de la souris, ou du clic, 
												ou une fois cliqué, tout dépend des comportements que l'on veut attribuer .
							
			
Il faut bien garder à l'esprit que ce fichier CSS ne traite que la partie graphique des pages . le comportement et le contenu des pages provient d'autres fichiers, 
comme les fichiers PHP pour les opérations de traitement en fonction de l'action engagé par le visiteur.
Si par exemple tu veux donner une couleur de fond à une liste, cela va affecter la totalité de la liste, le fichier PHP lui a autant d'instruction "ul li" que la liste comporte d'entrée .
Tu ne peux donc pas donner une couleur différente a chaque ligne de la liste (cela serait possible mais il faudrait coder des templates spécifiques difficile a gérer à ton niveau mais surtout, 
rallongerait le temps de traitement et la lourdeur de calcul coté serveur.


Une fois que les ID sont appelés, il faut ensuite respecter la syntaxe d'appel des arguments.
Chaque info sur l'ID s'engage via le sigle { et on termine cette la commande en refermant la balise via le sigle } , donc { bla bla } . ( ouverture accolade-fermeture accolade ) .

Entre ces balises, c'est la que tu va renseigner les infos concernant ton ID. A ce stade, quelque soit l'action ou comportement	renseigné, on termine toujours la ligne par le sigle ; (point virgule) .	
concernant le réglage à renseigné, là c'est en fonction de ce que tu veux faire. Tu inscris ton instruction puis tu place le sigle : (deux points ) . Puis tu inscris ta valeur .
Il est préférable de ventiler le codage, les espaces ne sont pas obligatoires partout ou suivant les instructions, mais en faisant cela, tu repères plus vite les erreurs de code.
A savoir:
lorsque tu renseignes une couleur, il faut que le sigle # (diese) précède le code couleur.
l'unité pour les dimensions est le pixel, tu renseignes px . existe aussi l'unité em , diffère du pixel mais tu en croisera rarement, mais par exemple, les CSS du plugin du 
formulaire de contact sont en unité em. 
Je te laisse quand même un lien qui pourra t'aider a faire la translation em <--> px :  http://pxtoem.com/     .
Si une valeur est à 0 (zéro) , pas obligatoire de renseigner l'unité .

Exemple récap:
	
#header{
	background: #BB2D2D;
} 	

Donc, on appelle et nomme l'ID-->#header    puis, on ouvre la balise concernant le(s) réglage(s)--> {  , puis à la ligne, on nomme le réglage--> background   , 
puis on place les deux points pour commencer les valeurs--> :  , puis on trouve notre valeur, ici un code couleur donc--> #BB2D2D  , puis, on clos le réglage--> ;   , enfin,
à la ligne, on referme la balise du réglage--> }  .
	
/* Basic Tag Elements */

a {
	text-decoration: none;
	
	outline: none;
	color: #0C51A6;  
	font-family: Times; 
	}
	
	a:hover {
		text-decoration: underline;
		}
	
img { 
	border: 0;
	}

body {
	color: #444;
 	margin: 0 auto; 
	font-size: 14px; 
	padding: 0; 
	font-family: Verdana;
	background: url(images/background_side.png)
}

h1 a, h2 a, h3 a, h4 a, h5 a {
	color: #222;
	}

textarea {
	width: 97%;
	}

/* Header Elements */

#header{
	background: #fff;
	float: left;
	width: 100%;
	}

#headerad {
	width: 468px;
	}	
/* ci dessous se trouve les réglages concernant les menus tout en haut de la page, à savoir, le nom du connecté, pour se logguer, se delogguer, tout ça quoi  :)   
Normalement, tu n'aura pas a y toucher, puisque ces menus sont "indispensables"  cependant, les ayant modifiés, je te renseigne ceux que tu pourrais éventuellement avoir besoin de modifier */
#login {
	height: 16px; /* ici la hauteur de la bande de logging */
	font-size: 12px; /* ici la taille de la police */
	color: #216DDF; /* ici le code couleur de la police */
	text-align: right; /* ici le placement du texte par rapport à la page. attention qu'ici tu ne modifies que les petits menus qui sont situés à droite en haut de ta page (connexion, déconnexion, s'inscrire, tout le barda quoi  :)  ) */
	padding: 7px 10px 9px; /*  ici les réglages du paddind du menu */
	background: url(images/login.png) repeat-x; /* ici l'image que le navigateur doit aller chercher. c'est elle qui "produit" la barre orange en dégradé que tu as tout en haut de la page sous ce menu.  
	ATTENTION , surtout n'enlève pas la répétition sur l'axe des x car, l'image ayant une taille de 1x34 pixels, ben, tu n'aurais plus que celle ci affichée une fois, donc, le fait de la répéter engendre le résultat visible de cette barre.  */
	}
	
	#login a {
		color: #61ABF0;  /*  ici se trouve le code couleur pour les écrits de ce menu */
		}
	/*  de ici */
	#login ul {
		padding: 0;
		margin: 0;
		}
	
	#login ul li {
		display: inline;
		}
	/* à ici, tu n'as pas à toucher */

	.dot:before {
	content: url(images/log.png) " "; /* ici l'image que le navigateur doit aller chercher pour afficher les 3 petits point verts entre les menus de logging */
	}
/* de ici */
#title {
	font-size: 48px;
	margin: 20px 0 0;
	padding: 0;
	line-height: 34px;
	}
	
	#title a {
		color: #222;
		}		
	
	#title a:hover {
		color: #cc0000;
		text-decoration: none;
		}
		
#description {
	font-size: 14px;
	margin: 10px 0 0;
	padding: 0;
	}		
/* à ici, tu n'as pas à toucher. le fait d'utiliser une bannière "désactive" si tu veux l'emploi d'un titre de site	et du comportement de celui ci par rapport à la souris du visiteur */

/* ci dessous, les réglages de la barre de logging, très peu de chose t'intéresses ici, celles qui le sont sont renseignées  ;)  */
#navigation {
	clear: left;  /* purge les réglages précédents, tu n'a pas a y toucher */
	background: url(images/nav.png) repeat; /* ici l'image que le navigateur doit aller chercher. c'est elle qui te fait l'intérieur de la barre du haut de page quand tu n'est pas loggué 
	comme sa sœur, ne pas modifier la répétition. cette image ci fait 2x24 pixels */
	float: left; 
	width: 100%; 
 	z-index: 100; 
 	position: relative; 
	margin-top: 20px; 
	}

#navigation ul * {
	margin:0; 
	padding:0
	}

	#navigation ul {
		padding: 0;
		margin: 0;
		}
	
	#navigation ul li {
		position:relative;
		font-family: Arial; 
		list-style-type: none;
		float: left;
		font-size: 12px;
		line-height: 24px;
		padding: 0;
		margin: 0;
		position: relative;
		}
	
	#navigation ul a {
		display: block;
		font-weight: bold;
		color: #216DDF;
		border-right: 1px solid #fff;
		padding: 0 15px;
		}
		
		#navigation ul a:hover {
			color: #444;
			background: #c5c5c5;
			text-decoration: none;
			}
#navigation ul li:hover ul { display: block; z-index: 1000;}	
#navigation ul li:hover ul ul { display: none; }	
#navigation ul ul { position:absolute; top:24px; left:0; background:#d1d1d1; display:none; list-style:none;}
#navigation ul ul li {position:relative; border:1px solid #aaa; width:159px; margin:0; }
#navigation ul ul li a {display:block; padding:0 7px 0 12px; color: #555; background-color:#d1d1d1; border-right: 0; font-size: 12px; }
#navigation ul ul li a:hover {background-color:#c5c5c5}
#navigation ul ul li:hover ul { display: block; }
#navigation ul ul ul { left:159px; top:-1px; display: none; }
/* t'as vu, pas grand chose à part l'image hein  :-)  */	


/* alors ici, c'est la partie de tous tes menus de haut de page (non, pas pour se connecter, on l'a vu juste avant celle la :)  )  */
/* dans toute cette section, il ne faut pas faire n'importe quoi. Si tu veux, elle fonctionne comme des poupées russes, c'est un emboitement de plusieurs section-sous sections */

/* ici, tu retrouves le premier bloc, celui qui va contenir tous les autres (ou la grosse poupée qui va contenir les autres plus petites */							
#sub-navigation { 
	clear: both; /* purge les réglages précédents, tu n'a pas a y toucher */
	float: right; /* le réglage pour rattacher le bloc à un coté de la page */
	width: 100%; /* sa largeur relative, tu n'as pas a toucher */
	padding-top: 0px; /* son padding haut */
 	padding-right: 5px; /* son padding droit */
	/* si tu as bien suivi, tu auras compris que si tu modifies ces valeurs, tu va bouger tout ce qui se trouve dans ce bloc, qui va du bout gauche au bout droit de la page */
	z-index: 50;
 	position: relative;
	}
	
	/* ici le réglage pour la phrase d'intro que je t'ai mis à gauche du menu */
	#sub-navigation span {
	margin-left: 5px; /* sa marge gauche */
	margin-top: 5px; /* sa marge haute */
	color: #216DDF; /* le code couleur du texte */
	font-size: 15px; /* la taille du texte */
	font-family: Arial; /* la police du texte */
	font-weight: bold;  /* le type de la police */
	font-style: italic; /* enfin, le style du texte */
	/* si tu suis toujours, tu auras compris que si tu déplaces le gros bloc du dessus, ce texte va bouger aussi, puisqu'il est contenu dans celui ci.
	donc si tu bouges le gros bloc des menus, il te faudra à l'aide de ces réglages, repositionner le texte d'intro */
	}





	
	#sub-navigation ul {
		padding: 0 0 0 5px; /* réglage du padding du menu, attention, agis sur la phrase d'intro ;) */
		margin: 0;  /* marge haute des menus */
		}
	
	#sub-navigation li {
		list-style-type: none;
		float: right; /* position d'alignement des boutons par rapport à la page */
		width: 82px ; /* largeur d'un bouton */
		font-size: 16px; /* taille du texte des boutons */
		font-weight: bold ;
		padding: 0 20px 0 0; /* réglage du padding des boutons */
		margin-right: 1px; /* la marge droite entre chaque bouton */
		line-height: 32px; /* la hauteur des boutons. 
		ATTENTION , celle ci va également modifier la hauteur du bloc, et donc, le positionnement de la phrase à gauche du menu */
		background:#216DDF; /*url(images/bouton01.png) ; /* ici l'image que le navigateur doit aller chercher pour faire les boutons. cette image fait 5x30 pixels, vu après le conseil, elle est désactivée et inclue dans ce commentaire et remplacée par une couleur */
		position: relative;
		}
	/* le réglages des textes des boutons de sous liste*/
	#sub-navigation a {
		color: #FFFFFF;  /* le code couleur du texte */
		padding: 0 20px;
		margin-left: 0px ;
		}
		/* réglage du comportement du texte au survol du bouton */
		#sub-navigation a:hover {
			text-decoration: underline; /* ici, il sera souligné lorsque la souris passera sur le bouton */
			}
					
/* les réglages de l'arborescence du menu, c'est à dire les boutons, listes et sous boutons */
#sub-navigation ul li:hover ul { display: block; }	
#sub-navigation ul li:hover ul ul { display: none; }	
#sub-navigation ul ul { position:absolute; top:30px; left:0; background:#216DDF; display:none; list-style:none; margin:0;padding:0; border-top: px solid #F8952B;} /* haut de la liste */
#sub-navigation ul ul li {position:relative; border:0px solid #F8952B; border-top: 2; width:175px; height:40px; margin:0; padding: 0; background: none;}
#sub-navigation ul ul li a {display:block; padding:0 0px 0 10px; color: #FFFFFF; background: #216DDF; border-right: 0; font-size: 13px; }
#sub-navigation ul ul li a:hover {background-color:#61ABF0}
#sub-navigation ul ul li:hover ul { display: block; }
#sub-navigation ul ul ul { left:175px; top:0px; display: none; }	

/* ceci ne te sert à rien, cela supprime les puces des listes */
#sub-navigation li.nodot {
	background: none;
	}
	
#sub-navigation li.right-d {
	float: right;
	
	}

/* Main Elements */

	/* ici les réglages du bloc main, c'est a dire ton gros bloc où s'affiche les textes de tes pages*/	
#mainwrapper {
	float: left; /* ça c'est pour le rattacher au coté gauche de la page, dans sa structure, mais pas "physiquement" puisque comme tu le vois, il y a d'abord la sidebar le + à gauche, donc il est à gauche, après la sidebar*/
	width: 100%; /* ici la largeur que doit occuper le bloc par rapport à l'espace qui lui est alloué, ici donc 100%. Modifier la valeur reviendrait à le "compresser" dans son espace */
	padding: 1px 0 10px 0; /* ses valeurs de padding */
	margin: 0; /* ses valeurs de marge */
	background: #FFFFFF; /*url(images/background.png) /* ici l'image que le navigateur doit aller chercher pour le fond de page des articles */
	}

	
	
	/* ci dessous, les réglages du bloc ENTIER de la sidebar*/
#sidebar {
	float: left; /* ça c'est pour la rattacher au coté gauche de la page*/
	margin: 0 0px; /* ici ses valeurs de marge*/
	padding: 0px 0 0; /* ici ses valeurs de padding*/
	width: 285px; /* ici sa valeur de largeur*/
	height: 465px;	/* ici sa valeur de hauteur*/
	background: url(images/side.png) /* ici l'image que le navigateur doit aller chercher pour le fond de la sidebar */
	}
	


	/* ci dessous, les réglages de la seconde sidebar, je ne l'ai pas activé*/
#secondsidebar {
	float: left;
	margin: 0 10px;
	padding: 5px 0 0;
	}

	/* ci dessous, un réglage du bloc sidebar*/	
.side {
	line-height: 10px;
	font-size: 18px;
	margin-bottom: 0;
	}	

	/* ci dessous, les réglages pour le bloc du widget texte de la phrase "commune rurale ... bla bla bla le cul du chat  :)  */
.textwidget {
	float: left; /* ça c'est pour le rattacher au coté gauche de la page*/
	margin-left: 0px; /* sa marge par rapport au coté gauche du widget des menus juste en dessous*/
	width: 190px ; /* sa largeur, tu peux t'en servir pour modifier la longueur de chaque ligne éventuellement */
	
	}

/* ci dessous, les réglages pour le texte du wigdet texte */	
.textwidget {
		font-size: 17px; /* taille de la police */
		font-weight: bold; /* type de la police */
		color: #FFFFFF;
padding: 0px 0 0px; 
		margin-top: 12px; /* marge haute du texte, agis aussi sur le widget du dessous */
		text-align: left; /* dispositiopn du texte dans son bloc */
		}	
	
	
	/* ci dessous, le positionement du widget avec les 3 liens */	
.side-widget {
	float: left; /* ça c'est pour le rattacher au coté gauche de la page */
	margin-top: 16px ; /* ça c'est sa marge par rapport au haut de la sidebar, agis a&ussi sur le widget du dessus */
	margin-left: 11px; /* sa marge par rapport au coté gauche de la sidebar */
	width: 200px ; /* largeur du bloc du widget */
	padding: 0 0px 15px; /* le padding est là pour le déplacer à l'interieur de son bloc, tu ne devrais pas avoir à y toucher */
	}
	
	/* ce qui suis ne t'es pas entièrement utile puisque les liens présents dans la sidebar sont individuels et directs, donc n'utilisent pas de listes et leurs menus. */
	/* ce qui peut te servir est renseigné */
	.side-widget ul {
		padding: 0;
		margin: 10;
		list-style-type: none;
		}

	.side-widget ul li {
		padding: 0;
		margin: 0;
		margin-top: 0px;
		font-size: 14px; /* taille de la police des liens du widgets */
		/*font-weight: bold;*/
		}
		
	.side-widget ul li {
		padding-left: 0px;
		margin: 2px 0;
		margin-top: 0px;
		}
		
	
	/*reglage du slideshow*/
	.side-widget h2 {
		font-size: 0px; 
		padding: 0px 0 0px;
		margin-top: 4px;
		text-align: left;
		text-transform: lowercase;
		}

	
	.side-widget .storycontent {
		border-bottom: 1px solid #ddd;
		}
		
	.side-widget .noline {
		border-bottom: 0;
		}		

.posts {
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
	float: left;
	width: 100%;
	}
	
	.posts h2 {
		margin: 10px 0 0;
		}
	
	.posts img {
		margin: 10px 10px 10px 0;
		float: left;
		}
		
.readmore {
	color: #cc0000;
	}
/* à ici */
/* fin de section widgets */

/* ici débute le footer, ou pied de page si tu veux */		
#footer {
	clear: both;  /* purge les réglages précédents, tu n'a pas a y toucher */
	float: left;  /* pour la rattacher au coté gauche de la page*/
	width: 100%;  /* largeur relative qu'il ocuppe sur la page, donc comme le header, 100%  */
	padding: 10px 0;  /* ses réglages de padding */
	text-align: center;  /* réglage de positionnement du texte de pied de page */
	font-size: 11px;  /* taille du texte */
	background: #fff;  /* code couleur du fond */
	}
	/* fin du footer */
	

/* Left Content Elements */

#leftcontent {
	float: left;
	margin: 0 15px;
	padding: 0;
	}

	#leftcontent h5 {
		font-family: Arial; 
		margin: 0;
		padding: 0;
		color: #cc0000;
		margin-bottom: 5px;
		font-size: 14px;
		}

	#leftcontent h1 {
		margin: 0;
		padding: 0;
		font-size: 24px;
		line-height: 26px;
		}

#leftcontent h1.catheader {
	margin-top: 39px; /*  marge haute du bloc de texte dans la page*/
	color: #25B34B;
	font-weight: normal;
	font-family: Verdana ; /* la police du titre */
	}
	
	#leftcontent .post h1, 
	#leftcontent .ind-post h1, 
	#leftcontent .twopost h1, 
	#leftcontent .threepost h1 {
		margin-top: 27px; /* hauteur du bloc de texte pour les articles */
		font-size: 24px;
		font-family: Verdana; /* police pour les articles */
		font-weight: normal;
		line-height: 38px;
		color: #25B34B;
		}
		
	#leftcontent .twopost h1 {
		font-size: 26px;
		line-height: 28px;
		}
	
	#leftcontent .threepost h1 {
		font-size: 20px;
		line-height: 22px;
		}
	
	#leftcontent .postmetadata {
		clear: both;
		line-height: 14px;
		}
		
	#leftcontent .post .entry {
		font-size: 15px;
		line-height: 18px;
		font-family: Verdana ;
		}
		
	#leftcontent .date {
		margin-bottom: 5px;
		font-style: italic;
		color: #888;
		}
		
	
		
	#leftcontent .catdesc {
		background: #f7f7f7;
		border: 3px double #ddd;
		padding: 0 10px;
		color: #666;
		font-size: 13px;
		line-height: 15px;
		margin-bottom: 10px;
		}
		
/* This is your subtitle style */

#leftcontent p.sub {
	font-size: 24px;
	line-height: 26px;
	font-weight: bold;
	font-style: italic;
	margin: 10px 0 0;
	}

/* This is your blockquote style */
	
#leftcontent blockquote {
	width: 250px;
	font-size: 24px;
	line-height: 26px;
	float: right;
	margin: 0 0 0 30px;
	padding: 0;
	font-style: italic;
	}
	
	#leftcontent blockquote p {
		padding: 0;
		margin: 0;
		}

.more-link {
	font-size: 11px;
	text-align: right;
	color: #cc0000;
	}

.tags a {
	color: #cc0000;
	}
	
.ind-post, .post {
	float: left;
	border-bottom: 1px solid #aaa;
	margin-bottom: 10px;
	padding-bottom: 10px;
	width: 100%;
}

	.ind-post img {
		margin: 0px 10px 5px 0;		
		}

#twocol {
	float: left;
	margin-bottom: 3px;
	padding: 10px 0 0;
	background: url(images/line.png) repeat-y 50% 0;
	}

	#twocol img {
		margin: 0px 8px 5px 0;
		}
		
	#twocol hr.two {
		height: 0;
		border: 0;
		clear: both;
		border-bottom: 1px solid #aaa;
		}
	
.mainhr {
	float: left;
	background: #aaa;
	clear: both;
	width: 100%;
	height: 1px;
	border: 0;
}	
	
.twopost {
	width: 46%;
	float: left;
	}	

	.twopost2, .twopost4 {
		margin-left: 7.5%;
		}
		
	.twopost3, .twopost4 {
		border-top: 1px solid #aaa;
		padding-top:5px;
		}
		
	.twopost1, .twopost3 {
		clear: left;
		}		
		
#threecol {
	float: left;
	background: url(images/line.png) repeat-y 31.5% 0;
	margin-top: 3px;
	}

#threecol2 {
	float: left;
	padding: 0;
	background: url(images/line.png) repeat-y 67% 0;
}

	#threecol img {
		margin: 0px 5px 5px 0;
		}

.threepost {
	width: 29%;
	float: left;
	border-top: 1px solid #aaa;
	padding-top: 10px;
	}

	.threepost2, .threepost5 {
		padding: 10px 0 0;
		margin: 0 6%;
		}
		
	.threepost1, .threepost2, .threepost3 {
		border-top: 0;
		}
		
	.threepost1, .threepost4 {
		clear: left;
		}
			
/* Other Elements */

.red, .entry a {
	color: #F8952B;
	}
	
#tagcloud {
	width: 400px;
	text-align: center;
	margin: auto;
	padding: 20px;
	}	
	
#tagcloud a {
	color: #cc0000;
	}


/* WordPress Required Elements */

.aligncenter,
div.aligncenter {
   display: block;
   margin: 5px auto;
}

.alignleft, div.alignleft {
   float: left;
   margin: 5px 15px 5px 0;
}

.alignright, div.alignright {
   float: right;
   margin: 5px 0 5px 15px;
}

.alignnone {
	margin: 5px 0;
	}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 0;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

#today {
	color: #cc0000;
	}

#wp-calendar {
	margin: auto;
	}