@charset "utf-8";
/* CSS Document : Beyond the Clouds - Utopicgraphic.info

Les éléments graphiques et le design du site (et donc cette feuille de styles CSS et les images) restent la propriété exclusive de leurs auteurs respectifs conformément aux droits d'auteur.
Toute réutilisation devra faire l'objet d'une demande préalable (e-m@il : bigotdamien (at)gmail.com).
Il est de plus dans votre intérêt d'avoir un site au design original, pour qu'il ait sa propre identité visuelle, plutôt qu'un design plagiat. */

html, body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	color:#fff;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.80em;
	border:0;
}

body {
	background:#76bce0 url(../images/fond.png) center bottom fixed repeat-x;
}


a {
	color:#fff;
	outline:none;
}

img {
	border:0px none;
}


#global {
	position:relative;
	width:860px;
	margin:0 auto 0 auto;
	z-index:1;
}


.header {
	float:left;
	clear:both;
	width:860px;
	padding:35px 0 35px 0;
}

	.header .logo {
		float:left;
		clear:left;
		width:390px;
		height:71px;
	}

	.header .infos {
		float:right;
		clear:right;
		padding:0 5px 0 0;
		font-variant:small-caps;
		line-height:71px;
		text-decoration:none;
	}

		.header .infos a {
			text-decoration:none;
		}

			.header .infos a:hover {
				border-bottom:1px dotted #fff;
			}

		.header .infos img {
			padding:0 10px 0 10px;
			vertical-align:middle;
		}

#menu {
	float:left;
	clear:both;
	width:860px;
	margin:0 0 30px 0;
}

#content {
	position:relative;
	float:left;
	clear:both;
	width:860px;
}

	#content .loader {
		position:relative;
		width:860px;
		height:32px;
		background:url(../images/loading.gif) center no-repeat;
	}

	#content .left {
		float:left;
		clear:left;
		width:540px;
	}
	
		#content .left a {
			text-decoration:none;
			border-bottom:1px dotted #fff;
		}
	
			#content .left a:hover {
				border-bottom:1px solid #fff;
			}
	
		#content .left .news, #content .left .category, #content .left .article, #content .left .author {
			float:left;
			clear:both;
			width:540px;
			padding:0 0 20px 0;
		}
	
			#content .left .news .logo {
				float:left;
				clear:left;
				width:50px;
				height:50px;
				background:url(../images/breve-logo.png) no-repeat;
			}
	
			#content .left .news .title {
				float:right;
				clear:right;
				width:470px;
				font-size:200%;
				font-weight:bold;
				text-transform:uppercase;
			}
	
			#content .left .news .date {
				float:right;
				clear:right;
				width:470px;
				font-size:125%;
				font-variant:small-caps;
			}
	
			#content .left .news .text {
				float:left;
				clear:both;
				width:540px;
				text-align:left;
				background:none;
			}
	
			#content .left .news .link {
				float:left;
				clear:both;
				width:540px;
				margin:10px 0 0 0;
				font-style:italic;
			}
	
			#content .left .news .note {
				float:left;
				clear:both;
				width:540px;
				padding:10px 0 0 0;
				font-style:italic;
			}
	
				#content .left .news .note p .spip_note{
					margin:0;
					padding:0;
				}
			
			
			#content .left .category a {
				border:none;
			}
			
				#content .left .category a:hover {
					border-bottom:1px solid #fff;
				}
			
			#content .left .category .title {
				width:540px;
				margin:0 0 5px 0;
				font-size:200%;
				font-weight:bold;
				text-transform:uppercase;
			}
			
			#content .left .category .logo {
				width:540px;
				height:100px;
				background:url(../images/rubrique-logo.png) center no-repeat;
			}
			
				#content .left .category .logo a {
					display:block;
					padding:10px;
					border:none;
				}
		
		
		#content .left .article .title {
			float:left;
			clear:both;
			width:540px;
			margin:0 0 10px 0;
			font-size:200%;
			font-weight:bold;
			text-align:left;
			text-transform:uppercase;
		}
		
		#content .left .article .gallery {
			float:left;
			clear:both;
			width:540px;
			margin:10px 0 10px 0;
			text-align:center;
		}

			#content .left .article .gallery a {
				width:75px;
				height:75px;
				border:none;
			}

			#content .left .article .gallery .information {
				font-style:italic;
			}
		
		#content .left .article .text {
			float:left;
			clear:both;
			width:540px;
		}
		
		#content .left .article .note {
			float:left;
			clear:both;
			width:540px;
		}
		
		
		#content .left .author .title {
			clear:both;
			margin:0 0 10px 0;
			font-size:150%;
			text-transform:uppercase;
			font-weight:bold;
		}
	
		#content .left .author form ul {
			margin:0;
			padding:0;
			list-style-type:none;
		}
	
			#content .left .author form ul li {
				clear:both;
				padding:5px 0 5px 0;
			}
	
				#content .left .author form ul li label {
					display:block;
					font-size:150%;
					text-transform:uppercase;
					font-weight:bold;
				}
			
				#content .left .author form ul li span {
					display:block;
					margin:0 0 2px 0;
					color:#555;
					font-style:italic;
				}
			
				#content .left .author form ul li input, #content .left .author form ul li textarea {
					display:block;
					color:#fff;
					font-size:0.80em;
					border:1px dotted #fff;
					background:none;
				}
			
				#content .left .author form ul li input {
					width:180px;
					height:18px;
					padding:0 0 0 20px;
					line-height:18px;
					font-size:1.2em;
				}
				
					#content .left .author form ul li input#sujet_message_auteur_1 {
						background:url(../images/contact-nom.png) 2px center no-repeat;
					}
				
					#content .left .author form ul li input#email_message_auteur_1 {
						background:url(../images/contact-email.png) 2px center no-repeat;
					}
				
				#content .left .author form ul li textarea {
					width:380px;
					padding:0 0 0 20px;
					font-family:Verdana, Arial, Helvetica, sans-serif;
					font-size:1.1em;
				}
				
					#content .left .author form ul li textarea#texte_message_auteur_1 {
						background:url(../images/contact-message.png) 2px 1px no-repeat;
					}
			
					#content .left .author form ul li input:focus, #content .left .author form ul li textarea:focus {
						border:1px solid #fff;
					}
		

	#content .right {
		float:right;
		clear:right;
		width:280px;
		padding:0 0 20px 0;
	}
	
		#content .right a {
			text-decoration:none;
			border-bottom:1px dotted #fff;
		}
	
			#content .right a:hover {
				border-bottom:1px solid #fff;
			}
	
		#content .right .title {
			float:left;
			clear:left;
			width:210px;
			margin:0 0 5px 0;
			font-size:150%;
			text-transform:uppercase;
			font-weight:bold;
		}
	
			#content .right .title:first-letter {
				text-transform:capitalize;	
			}
	
		#content .right .logo {
			float:right;
			clear:right;
			width:50px;
			height:50px;
			margin:0 0 10px 20px;
			background:url(../images/breve-logo.png) no-repeat;
		}

#footer {
	position:relative;
	float:left;
	clear:both;
	width:860px;
	margin:0 0 40px 0;
	padding:10px 0 0 0;
	color:#fff;
	font-style:italic;
	text-align:center;
}
	
	#footer a {
		font-style:normal;
		text-decoration:none;
		border-bottom:1px dotted #fff;
	}

		#footer a:hover {
			border-bottom:1px solid #fff;
		}

	#footer img {
		padding:0 25px 0 25px;
	}


.contact {
	position:absolute;
	top:0;
	left:0;
	width:860px;
	height:100%;
	margin:-2001px 0 0 0;
	background:#76bce0 url(../images/fond.png) center bottom fixed repeat-x;
	z-index:2001;
}

	.contact .left {
		float:left;
		clear:left;
		width:540px;
		margin:40px 0 0 0;
	}
	
		.contact .left .title {
			clear:both;
			margin:0 0 10px 0;
			font-size:150%;
			text-transform:uppercase;
			font-weight:bold;
		}
	
		.contact .left form ul {
			margin:0;
			padding:0;
			list-style-type:none;
		}
	
			.contact .left form ul li {
				clear:both;
				padding:5px 0 5px 0;
			}
	
				.contact .left form ul li label {
					display:block;
					font-size:150%;
					text-transform:uppercase;
					font-weight:bold;
				}
			
				.contact .left form ul li span {
					display:block;
					margin:0 0 2px 0;
					color:#555;
					font-style:italic;
				}
			
				.contact .left form ul li input, .contact .left form ul li textarea {
					display:block;
					color:#fff;
					font-size:0.80em;
					border:1px dotted #fff;
					background:none;
				}
			
				.contact .left form ul li input {
					width:180px;
					height:18px;
					padding:0 0 0 20px;
					line-height:18px;
					font-size:1.2em;
				}
				
					.contact .left form ul li input#sujet_message_auteurnew {
						background:url(../images/contact-nom.png) 2px center no-repeat;
					}
				
					.contact .left form ul li input#email_message_auteurnew {
						background:url(../images/contact-email.png) 2px center no-repeat;
					}
				
				.contact .left form ul li textarea {
					width:380px;
					padding:0 0 0 20px;
					font-family:Verdana, Arial, Helvetica, sans-serif;
					font-size:1.1em;
				}
				
					.contact .left form ul li textarea#texte_message_auteurnew {
						background:url(../images/contact-message.png) 2px 1px no-repeat;
					}
			
					.contact .left form ul li input:focus, .contact .left form ul li textarea:focus {
						border:1px solid #fff;
					}

	.contact .right {
		float:right;
		width:280px;
		margin:40px 0 0 0;
		padding:0 0 10px 0;
	}
	
		.contact .right a {
			text-decoration:none;
			border-bottom:1px dotted #fff;
		}
	
			#content .right a:hover {
				border-bottom:1px solid #fff;
			}
	
		.contact .right .title {
			float:left;
			clear:left;
			width:210px;
			margin:0 0 10px 0;
			font-size:150%;
			text-transform:uppercase;
			font-weight:bold;
		}
	
			.contact .right .title:first-letter {
				text-transform:capitalize;	
			}
	
		.contact .right .logo {
			float:right;
			clear:right;
			width:50px;
			height:50px;
			margin:0 0 10px 20px;
			background:url(../images/breve-logo.png) no-repeat;
		}