@charset "utf-8";

/* ==================================================

    FEUILLE DE STYLES POUR BONIFACIO STRAITS PILOTS

   ================================================== */


/* --- STYLES DE BASE TEXTES ET ÉLÉMENTS --- */

/* Global */

@import url('basic.css');


img {
	float: left;
	margin-right: 25px;
	margin-left: 5px;
	margin-top:	5px;
	margin-bottom: 5px;
	border: 1px hidden #333333;
}

/* 	The header styles the header text and image at the top of the layout */
#header {
	background-color: #ffffff;
}
	#heading {
		font-size:2.5em;
		font-weight:bold;
		color:#FFFFFF;
		padding-left:5%;
		padding-top:.1em;
		padding-bottom:1px;
		background-color:#cccccc;

	}
	.sub_heading {
		color:#333333;
		font-size:.7em;
		font-variant:small-caps;
	}
	
	#header #header_image {
		width:1000px;
		height:370px;
		margin: 0 auto;
		background-attachment: scroll;
		background-repeat: no-repeat;
		background-position: center bottom;
	}
		
	#flashcontenu {
		margin: 0 0 40px 20px;
	}
	
/* navigation 
	/* The navigation is styled here */
	#navigation {
		float:left;
		clear:left;
		width:240px;
		min-height:300px; /* Minimum height is set to stop the shadow being cut off if not enough content is entered */
		/*border-right-width: 5px;
		border-right-style: solid;
		border-right-color: #1E81B9;*/
		background-image: url(../images/ombre_gauche.png); /* the left shadow image */
	/*	background-attachment: scroll;*/
		background-repeat: no-repeat;
		background-position: right top;
	}
	

#content_wrapper {
	width:950px;
	height:233px;
	margin:0 auto;
	background-attachment: scroll;
/*	background-image: url(../images/content_background_790x233.jpg);*/
	background-repeat: no-repeat;
	background-position: center top;
}

	/* The content div sets up the main content of the page, paragraphs, headings etc... */
	#content {
		float:right;
		clear:right;
		width:682px;
		min-height:300px;
		background-attachment: scroll;
		background-image: url(../images/ombre_droit.png);
		background-repeat: no-repeat;
		background-position: right top;
		
	}
		#content p {
			margin-top:1.5em;
			margin-left:15px;
			margin-right: 20px;
			text-align: justify;
			color: #333333;
			font-size: 1em;
			line-height: 1.3em;
		}
		#content h1, h2, h3 {
			margin-top:1.5em;
		}
		#content ul {
			margin-top:1.5em;
			margin-left: 30px;
			margin-right: 30px;
			list-style-type: disc;
			list-style-image: url(../images/list_10x10.gif);
		}
		#content ol {
			margin-top:1.5em;
			margin-left: 35px;
			margin-right: 40px;
		}
		#content li {
			line-height:1.1em;
		}
		/* 	The blockquote styling is here, this includes a class called readmore, this allows a link to be placed
			at the bottom right of the blockquote */
		#content blockquote {
			float:left;
			width:500px;
			background-color: #CCCCCC;
			border-left-width: 4px;
			border-left-style: solid;
			border-left-color: #1E81B9;
			padding-bottom: 2px;
			padding-top: 2px;
			margin-left:20px;
			margin-top:1em;
			margin-bottom:1em;
		}
		
			#content blockquote .readmore {
				float:right;
				font-size:.8em;
				text-transform:uppercase;
				padding-top:1em;
				padding-right:10px;
			}
				
		/* 	The clases below controls the 2 column layout within the main content. */
		.column {
			width:280px;
			float:left;
		}
		.right {
			margin-left:20px;
			/* Use this space to individually style the right column */
		}
		.left {
			/* Use this space to individually style the left column */
		}


	/* The footer is styled here */
	#footer {
		clear:both;
		float:left;
		margin-top:2em;
		width: 546px;
		line-height:1em;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #333333;
		padding-top:0.1em;
	}
		#footer p {
			line-height:1.5em;
			padding:0;
			margin:0;
			text-align:right;
		}
		#footer a {	color:#000000;	}
			#footer a:hover {color:#EA581A;	}
			
	#sep hr {
		clear:both;
		float:left;
		margin-top:2em;
		width: 546px;
		line-height:1em;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #333333;
		padding-top:0.1em;
	}	


/* Fin */

/* Complement HTML javascript Ajax Raflaichissement*/ 

			#page{
			min-height: 600px;
			width:900px;
			margin-left:auto;
			margin-right:auto;
			}
			
			#menu{
			float:left;
			width : 605px;
			height: 250px;
			text-align:left;
			}
			
			#contenu{
			float:left;
			width : 650px;
			text-align:left;
			min-height:300px;
			}