/* Réalisé à partir d'une feuille de style vierge comportant les principales balises d'un 
blog realise avec dotclear - Etablie par Kozlika pour la dcTeam
le 7 janvier 2007. 

Licence : domaine public 

*/


/* ------------------------------------------------------------
Bloc de styles à supprimer, ne servent qu'aux premiers tests
------------------------------------------------------------- */
 
@import url(layout.css);

body {
 	background : #FFFFFF;
 	font-family: Georgia;
	font-size: 13px;
	word-spacing:0.03em;
	line-height: 19.5px;
 	} 
#page {
	background: white;
	}
	

a {	
	color: #FF3333;
	text-decoration : none;
	}
	
a:hover {
	color: #000000;
}

a:active, a:focus {
	outline: none;
}	

#sidebar h2 {
	}

	
fieldset {
	border : none;
	}

	


/* ---------------- BOUTONS ---------------------- */

hbouton, hbouton a {
	font-family: "Antique Olive Std", Arial;
	text-transform: uppercase;
	color: transparent;
	letter-spacing: 2px;
	font-weight: normal;
	font-size: 15px;
	text-align: center;
}

hbouton a:hover, hbouton a:active {
	color: #000000;
	text-decoration: none;
}
	

 	
#maison, #maison a {
	letter-spacing: 1px;
	position: fixed;
	background: transparent url(http://www.formes-vives.org/atelier/public/boutons/maison.png) no-repeat;
	right: 10px;
	bottom: 150px;
	z-index: 1;	
	width: 40px;
	height: 44px;
}

#maison a:hover {
	background: transparent url(http://www.formes-vives.org/atelier/public/boutons/maison_h.png) no-repeat;
}
 	
/* -----------------------------------------------------------------
	1. STRUCTURE
	a inscrire ici ou en important une css de structure placee dans
	le meme repertoire et appelee grace a l'instruction ci-dessous
------------------------------------------------------------------ */
@import url(nom_du_fichier.css);


/* ------------------------------------------------------------
	2. BALISES HTML PAR DEFAUT
------------------------------------------------------------- */

body { 
	margin-left : auto; 
	margin-right : auto;
}

 


p { 
	}


htitre {color: #000000;
	letter-spacing: 0.05em;
	font-family: "Antique Olive Std", Arial;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 15px;
}

htitre a, htitre a:hover {
	text-decoration: none;
}

	
sup { }
abbr, acronym { }

blockquote, q { 
}

blockquote { 
	margin-left: 45px;
	margin-top: 5px;
	margin-bottom: 0px;
	font-size: 12px;
	width: 360px;
	}

cite { 
}



ul { 
	list-style-type:none;
	padding:0px;
	}
	
ol { }
dl { }

form { }
fieldset { }
input { }
label { }

a { 
	border: 0px;
}
a:link { border: 0px;
}
a:visited { }
a:hover { 
	border: 0px;
}
a:focus { }
a[hreflang]:after { }
a img { 
	border: 0px;
}
 
code, pre { }
pre { }
 
hr { }
 
/* ------------------------------------------------------------
	3. PAGE
------------------------------------------------------------- */
 
#page { 
margin-left : auto; 
margin-right : auto;

}

 
/* ------------------------------------------------------------
	4. HAUT DE PAGE
------------------------------------------------------------- */

#top { }
#top h1 { }
#top h1 a { }
#prelude { }
#prelude a { }


/* ------------------------------------------------------------
	5. WRAPPER MAIN CONTENT
------------------------------------------------------------- */

#wrapper { }
#main { 
        padding-top: 8px;
	padding-bottom: 20px;
}
#content { 

}

img {
margin: 0px auto 10px auto; 
float: left;
padding: 0 20px 0 0px;
	}
	
#content-info { 
	margin-bottom: 0px;
	}
#content-info h2 { }
#content-info p { 
	}

.content-inner { }

.pagination { }
#navlinks { }


/* ------------------------------------------------------------
	6. BILLETS
------------------------------------------------------------- */

.post {width: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
	display:inline;
	 }
.post.first { }
.post.odd { }

.day-date { }
.post-title {
	 }

	 
.post-info { }
.post-tags { }
.post-excerpt { 
	}
	
.post-content { 	
	margin-left : auto; 
margin-right : auto;
display:inline;
float: left;
min-height:200px;
min-width:200px;

	}


.read-it { }

.footnotes { 
}

.footnotes h4 { 
}

.post-info-co { }
.comment_count { }
.pings_count { }
.attach_count {
	 }

#attachments { }
#attachments h3 { }
#attachments ul { }
#attachments ul li { }
#attachments li.audio { }
#attachments li.package { }
#attachments li.text { }



/* ------------------------------------------------------------
	8. SIDEBAR
------------------------------------------------------------- */

#sidebar { 
	text-align : left;
 	font-family: Georgia;
	font-size: 13px;
	word-spacing:0.03em;
	line-height: 17px;
	padding-left: 4px;
	padding-right: 4px;
	color: #FFFFFF;
}

#sidebar a { 
	font-family: Georgia;
	color: #FFFFFF;
	text-decoration: none; 
	margin-left: 5px;
}

#sidebar a:hover { 
	color: #FFFFFF;
	text-decoration: underline;
}
#blognav { 

}
#blogextra { 

}

#sidebar h2 { 
	color : #FFFFFF;
	font-family: "Antique Olive Std", 'Trebuchet MS', Trebuchet, Arial;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 13px;
	line-height: 17px;
	margin-left: 5px;
	margin-top: 0px;
	letter-spacing: 0.05em;
	padding-top: 7px;
	margin-bottom: 0px;
	}	
	
#sidebar h3 { }

#sidebar ul {
	list-style-type: none;
	margin-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	line-height: 17px;
	margin-left : 0px;
	 }
	 
#sidebar li {
	padding-left: 0px;
	 }

#sidebar li a {
	 }

/* boites du menu des widgets livres avec Dotclear */
#search { 
		margin-top: 20px;
		margin-bottom: 15px;
}
#search form { }
#search input[type=text] { 
	width: 80px;
	} /* ou #search #q */
#search input[type=submit] { } /* ou #search .submit */

#topnav { 
}
.topnav-arch { }
.topnav-home { }

.selected {
 }
.lang { }
.categories { 
}
.syndicate { 
    }
.lastposts { }
.lastcomments { }
.text { 
	font-family: 'Trebuchet MS', Trebuchet, Arial;
	font-size: 11px;
	font-weight:bold;	
	margin-right: 20px;
	}
.links { }

.tags { 	
	position: fixed;
	bottom: 50px;
	right: 20px;
	background: #FFFFFF;

}
.tags ul { }
.tags li, .tags li a { 
}




/* a completer separement ou globalement pour le sidebar et la page 
spécifique des tags avec les differentes class des tags en fonction 
de leur frequence - voir 9/ classes communes */


/* ------------------------------------------------------------
	9. FOOTER
------------------------------------------------------------- */

#footer { }
#footer p { }


/* ------------------------------------------------------------
	10. CLASSES COMMUNES
------------------------------------------------------------- */

/* class sur les liens rss (on peut y placer l'icone
feed.png a piocher dans le theme par defaut par ex.) */

.feed { 
	padding-left:16px;
	background : transparent url(images/feed.png) no-repeat left center;
	 }


/* tags dans le sidebar et dans la page les regroupant
(exemple ici pour un nuage) */
.dc-tags #content ul li, .dc-tags #content ul li a, 
.tags ul li, .tags ul li a {
	font-family: 'Trebuchet MS', Trebuchet, Arial;
	font-size: 11px;
	color:#ff3333; 
	font-weight:bold;
	width : auto;
	padding-left : 0;
	padding-right : 0px;
	line-height : 13px;
	margin-bottom: 0px;
	font-style:normal;
}
.tags ul li a:hover {

}
.dc-tags .tag0, .tags .tag0 { font-size: 100%; }
.dc-tags .tag10, .tags .tag10 { font-size: 100%; }
.dc-tags .tag20, .tags .tag20 { font-size: 100%; }
.dc-tags .tag30, .tags .tag30 { font-size: 100%; }
.dc-tags .tag40, .tags .tag40 { font-size: 100%; }
.dc-tags .tag50, .tags .tag50 { font-size: 100%; }
.dc-tags .tag60, .tags .tag60 { font-size: 100%; }
.dc-tags .tag70, .tags .tag70 { font-size: 100%; }
.dc-tags .tag80, .tags .tag80 { font-size: 100%; }
.dc-tags .tag90, .tags .tag90 { font-size: 100%; }
.dc-tags .tag100, .tags .tag100 { font-size: 100%; }



/* messages d'erreur */
.error {
	border : 1px solid #c44;
	background : #df0;
	padding : 0.5em;
	}
.error ul {
	padding-left : 20px;
	color: #000000;
	}
.error li {
	list-style : square;
	}
	
/* exemples de ceux que j'ajoute souvent */
.left { margin-left : auto; margin-right : auto; }
.right { margin-left : auto; margin-right : auto; }
.center { margin-left : auto; margin-right : auto; }
.left-text { text-align : left; }
.right-text { text-align : right; }
.center-text { text-align : center; }
.little-text { font-size : .8em;}
.little-upper-text { font-size : .8em; text-transform : uppercase; }


/* ------------------------------------------------------------
	11. PAGES SPECIFIQUES
	j'indique le marqueur du body, a completer pour cibler 
	plus precisement (cf l'exemple ci-dessus pour les tags)
------------------------------------------------------------- */

.dc-home { }
.dc-post { }
.dc-categories {
}
.dc-category { 
	}


#subcategories a, #subcategories a:hover {
	letter-spacing: 0.05em;
	font-family: "Antique Olive Std", Arial;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 15px;
	margin-top: -20px;
	padding-top: -20px;
	width: 560px;
	}
	

#subcategories ul {
	list-style-type: none;
	padding-left: 0px;
	margin-bottom: 27px;
	}

.dc-archive { }
.dc-archive-month { }
.dc-tags { }
.dc-tag { }
.dc-404 { }
.dc-search { }


/* ---------------------------------------------------
  12. ET POUR FINIR NE PAS OUBLIER LES CLEARERS
	ici ceux le plus souvent necessaires
--------------------------------------------------- */
.post, .post-content, .footnotes, .attachments, 
.post-info-co, #comments, #footer {
    clear:none;
    }




/* ---------------------------------------------------
  RESPONSIVE DESIGN
--------------------------------------------------- */

#sidebartitle h2 {
	padding:0;
	margin:0;
	line-height:0;
	display:inline;
}

#sidebartitle {
	position:relative;
	padding-left:5px;
	padding-top:0;
	line-height:17px;
}


#moremenu {
	display:none;
	margin-left:15px;
	padding-left:20px;
	padding-right:20px;
	cursor:pointer;
}

#menucontent {
	display:block;
}


#sidebar {
	line-height:17px;
	padding-top:17px;
}


@media (max-width: 1050px){

img {
	max-width:920px;
	height:auto;
}


}



@media (max-width: 950px){

img {
	max-width:820px;
	height:auto;
}


}


@media (max-width: 850px){

img {
	max-width:720px;
	height:auto;
}


}




@media (max-width: 750px){

img {
	max-width:620px;
	height:auto;
}


}


@media (max-width: 650px){

img {
	max-width:520px;
	height:auto;
}


}



@media (max-width: 550px){

img {
	max-width:450px;
	height:auto;
}

#content {
	padding: 10px;
}

#sidebarcontent {
	display:none;
}

#sidebar {
	padding-top:5px;
	padding-bottom:5px;
	font-size:0.9em;
}

#sidebar, #sidebar ul, #sidebar h2 {
	line-height: 14px;
}

#sidebar h2 {
	font-size:0.9em;
}

#moremenu {
	display:inline;
}

}


@media (max-width: 500px){

img {
	max-width:400px;
	height:auto;
}


}



@media (max-width: 450px){

img {
	max-width:350px;
	height:auto;
}


}


@media (max-width: 400px){

img {
	max-width:325px;
	height:auto;
}


}


@media (max-width: 350px){

img {
	max-width:300px;
	height:auto;
}



}

@media (max-width: 325px){

img {
	max-width:290px;
	height:auto;
}



}



@media (max-width: 300px){

img {
	max-width:250px;
	height:auto;
}


}