/* Stylesheet "Météo des Plages" :: v1 (01-07-2009) */
/* You may learn from this CSS and use its techniques in your own projects, but the unique combination of images, colors, sizes, typography, and positioning ("the design") is copyright (c) 2009 "Météo des Plages" and may not be used by anyone but us. */ 

/*
	Style Index
	---------------------
	
	- Site Structure Styles
		- General Styles
		- Main Layout Styles
		
	- Content Styles
		- General Content Styles
		- Heading Styles
		- Paragraph Styles
		- Link Styles
		
	- Image Styles
		- General Image Styles

	- Facebox Styles
		- General Image Styles

*/ 







/*** Site Structure Styles ***/

		/* General Styles */
		
			* {
				margin:0;
				padding:0;
			}
						
		/************************/
	
		/* Main Layout Styles */
			
			body {
				background:				#000;
				color:						#fff;
				font-family:			"Lucida Grande",Arial,Verdana,sans-serif;
				font-size:				13px;
				line-height:			20px; 
				padding:          60px 0;
			}
			
			#container {
		 		background:				url(../images/bg_container.png) repeat-x top center #a7c7dc;
		 		margin: 					0 auto;
	 			overflow: 				hidden;
	  	 	padding:          0 60px;
		 		width:            980px;
			}
			
			#header {
			 	height:						100px;
				padding:          60px 0 10px 0; 
				position:         relative;
			}
			
			#content {
				float: 						right;
				overflow: 				hidden;
	 			padding:          4px 0 60px 0; 
				width: 						460px;
			}
			
			#sidebar {
		 		background:				url(../images/bg_sidebar.jpg) no-repeat top left;
				float: 						left;                                       
				min-height:       392px;
				width: 						460px;
			}
			
			#footer {                    
				background:       #EAEAEA;
				border-top:       1px solid #ccc;
				font-size: 				12px;
		 		margin: 					0 auto;
	 			overflow: 				hidden;
	  	 	padding:          20px 60px;
		 		width:            980px;
			}

		/************************/







/*** Content Styles ***/

		/* General Content Styles */

			a:link, a:visited, a:active {
				color: 							#000;
				outline: 						none;
			}
			
			a:hover {
				color: 							#000;
				outline: 						none;
				text-decoration: 		underline;
			}
							
		/************************/
	
		/* Heading Styles */
			
			h1 {
				background:				url(../images/logo.png) no-repeat top left;
				height: 					55px;    
				margin:           0 auto;
		 		text-indent:			-4000px;
		 		width: 					  700px;
			}
			
			h2 {
				font-size:				18px;
				font-weight: 			bold;
				margin:           0 0 13px 0;
				text-shadow: 			1px 0 #5b8eb9;
			}
			
			h3 {
				margin:           0 0 0 0;
 				text-shadow: 			1px 0 #5b8eb9;
 			}

		/************************/
	
		/* Paragraph Styles */		
			
			#content p {
				clear: 						both;      
				color:            #fff;
				margin: 					0 0 13px 0;
				text-shadow: 			1px 0 #5b8eb9;
 			}
			    
			#content p.buttons {
				margin:           32px 0 13px 0;
			}                         

			p strong {
				font-weight: 			normal;
			}
			
			#footer p {
		 		color: 						#5b8eb9;  
		   	margin:           0 auto;    
		   	text-align:				center;
			}
			
			#footer p.disclaimer {
				color: 						#5b8eb9;
				font-size: 				11px;
			}

		/************************/
	
		/* Link Styles */
			
			p.button {
				text-indent:      -4000px;
			}
			p.download_button a:link, p.download_button a:visited {
				background:				url(../images/bg_download_button.png) no-repeat 0 0;
				display: 					block;
				height:  					41px;
				text-indent:      -4000px;
				width: 						270px;
			}
			
			p.download_button a:hover {
				background:				url(../images/bg_download_button.png) no-repeat 0 -41px;
			}
			
			p.download_button a:active {
				background:				url(../images/bg_download_button.png) no-repeat 0 -82px;
			}
			
			p.buttons a.download:link, p.buttons a.download:visited {
				background:				url(../images/bg_download_a.png) no-repeat 21px 4px #4c86b1;
				border:           2px solid #fff;
				color:            #fff;   
				line-height:      25px;
				padding:          7px 25px 7px 50px;
				text-shadow: 			1px 0 #0d4176;
				text-decoration:  none;
			}
			                      
			p.buttons a.download:hover, p.buttons a.download:active {              
				background:				url(../images/bg_download_a.png) no-repeat 21px 4px #416e9a;
				text-shadow: 			1px 0 #0f4372;
			}
			
			p.buttons a.demo:link, p.buttons a.demo:visited {
				background:				#80a7c2;
				border:           2px solid #fff;
				color:            #fff;   
				line-height:      25px;
				padding:          7px 25px;
				text-shadow: 			1px 0 #5b86a4;
				text-decoration:  none;
			}
			                      
			p.buttons a.demo:hover, p.buttons a.demo:active {              
				background:				#416e9a;
				text-shadow: 			1px 0 #0f4372;
			}
			
			p.twitter_button a:link, p.twitter_button a:visited {
				background:				url(../images/bg_twitter_button2.png) no-repeat 0 0;
				display: 					block;
				height:  					41px;
				text-indent:      -40000px;
				width: 						215px;
			}
			
			p.twitter_button a:hover {
				background:				url(../images/bg_twitter_button2.png) no-repeat 0 -41px;
			}
			
			p.twitter_button a:active {
				background:				url(../images/bg_twitter_button2.png) no-repeat 0 -82px;
			}
			
			#footer a {
				color: 						#5f8bab;
			}
			
			#footer a:hover {
				color: 						#000;
			}

		/************************/







/*** List Styles ***/

		/* General List Styles */

      li {
        list-style:       square;
        margin:           0 0 0 1em;
      }

      #content ul {
				margin:           0 0 13px 0;
			}

      #content li {
				text-shadow: 			1px 0 #5b8eb9;
			}

      #header ul {                  
				position:         absolute; 
				right:            0; 
				top:              87px;
			} 
			 
			#header li {
        display:          block;
				float:            left;
				list-style:       square;
		    margin:           0 0 0 20px;
    	}

			#header li a {
		 		color:            #cbdfec;
		 		font-size:				18px;
				font-weight: 			bold;
				margin:           0 0 20px 0;
				text-shadow: 			1px 0 #5b8eb9;  
				text-decoration:  none;
			}  
			
			#header li.current a {
				color:            #fff;
			}

		/************************/







/*** Image Styles ***/

		/* General Image Styles */
		
			img {
				border: 				none;
			}
		
		/************************/







/*** Facebox Styles ***/

		#facebox .b {
		  background:url(../images/b.png);
		}

		#facebox .tl {
		  background:url(../images/tl.png);
		}

		#facebox .tr {
		  background:url(../images/tr.png);
		}

		#facebox .bl {
		  background:url(../images/bl.png);
		}

		#facebox .br {
		  background:url(../images/br.png);
		}

		#facebox {
		  position: absolute;
		  top: 0;
		  left: 0;
		  z-index: 100;
		  text-align: left;
		}

		#facebox .popup {
		  position: relative;
		}

		#facebox table {
		  border-collapse: collapse;
		}

		#facebox td {
		  border-bottom: 0;
		  padding: 0;
		}

		#facebox .body {
		  padding: 10px;
		  background: #fff;
		  width: 370px;
		}

		#facebox .loading {
		  text-align: center;
		}

		#facebox .image {
		  text-align: center;
		}

		#facebox img {
		  border: 0;
		  margin: 0;
		}

		#facebox .footer {
		  border-top: 1px solid #DDDDDD;
		  padding-top: 5px;
		  margin-top: 10px;
		  text-align: right;
		}

		#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
		  height: 10px;
		  width: 10px;
		  overflow: hidden;
		  padding: 0;
		}

		#facebox_overlay {
		  position: fixed;
		  top: 0px;
		  left: 0px;
		  height:100%;
		  width:100%;
		}

		.facebox_hide {
		  z-index:-100;
		}

		.facebox_overlayBG {
		  background-color: #000;
		  z-index: 99;
		}

		* html #facebox_overlay { /* ie6 hack */
		  position: absolute;
		  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
		}