body { 
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  text-align:center;
  background-color:#000000;
  /* background-image:url(wallpaper-stars.jpg); */
  background-repeat: no-repeat;
  background-position:center;
  background-size: 150% 150%;
 }
 
 .boxer {
   display: table;
   border-collapse: collapse;
}
 
.boxer .box-row {
   display: table-row;
}
 
.boxer .box {
   display: table-cell;
   text-align: center;
   vertical-align: center;
   border: 1px solid black;
   padding: 3px;
}
 
 .petit {
font-size: 11px;
 }
 
 .gros {
font-size: 16px;
font-weight:bold;
 }

.tresgros {
font-size: 20px;
font-weight:bold;
}
 
 .blanc {
color:#FFFFFF;
 }

.blanc_ombre {
	color:#FFFFFF;
	text-shadow: 2px 2px #555555;
}
 
.marine {
color: #0b00d6;
 }

.rose {
	color: deeppink;
}

.canari {
	color: orangered;
}

.vert {
	color: green;
}

.temperature {	
font-size: 12px;
font-weight:bold;
}

.cadremeteo {
    position: relative;
    width: 90%;
    height: 55px;
    padding-top: 14px;
}

/* STRUCTURE */

#pagewrap {
	padding: 5px;
	width: 960px;
	margin: 20px auto;
}
header {
	height: 110px;
	padding: 0 15px;
	text-align:center;
	vertical-align: text-top;	
}
#content {
	width: 280px;
	float: left;
	padding: 5px 15px;
	text-align:center;
	height: 330px;
}

#middle 
	{
	    width: 280px;
	    float: left;
	    padding: 5px 15px;
	    margin: 0px 5px 5px 5px;
	    /* background-image: url(fond_case.jpg); */
	    /* background-repeat: no-repeat; */
	    /* background-size: 100% 100%; */
	    height: 330px;
	    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(192,238,255,1) 87%, rgba(237,252,255,1) 100%);
	    border-radius: 6px 6px 6px 6px;
	    -moz-border-radius: 6px 6px 6px 6px;
	    -webkit-border-radius: 6px 6px 6px 6px;
	    border: 1px solid #a00000;
	}

#sidebar 
	{
	width: 270px;
	padding: 5px 15px;
	float: left;
	height: 330px;
	}

footer 
	{
	clear: both;
	padding: 0 15px;
	}

.imghead 
	{
	max-width: 500px;
	min-width: 480px;
	text-align:center;
	float: center;
	}
	
img 
	{ 
	text-align:center;
	max-width: 100%; 
	height: auto; 
	}

/************************************************************************************
COMMON
*************************************************************************************/

#content {
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(192,238,255,1) 87%, rgba(237,252,255,1) 100%);
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    border: 1px solid #a00000;
}
#sidebar {
	background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(192,238,255,1) 87%, rgba(237,252,255,1) 100%);
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    border: 1px solid #a00000;
}
header, #content, #middle, #sidebar {
	margin-bottom: 5px;
}

/*
#pagewrap, header, #content, #middle, #sidebar, footer {
	border: solid 1px #ccc;
}
*/

.titremystic
{
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    font-size: 29px;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: #c70000;
    border: 4px double rgba(255,255,255,.25);
}



/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1024px or less */
@media screen and (max-width: 1024px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 41%;
		padding: 1% 4%;
		height: 430px;
	}
	#middle {
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
		float: right;
		height: 430px;
	}
	
	#sidebar {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
		height:auto;
	}

	header, footer {
		padding: 1% 4%;
	}
	 .gros {
	font-size: 28px;
	font-weight:bold;
 	}	
}

/* for 980px or less */
@media screen and (max-width: 980px) {
	body 
		{
		/* background-image:url(tiles.jpg); */
		background-repeat:repeat;
		background-size: 250px 141px;
		font-size: 18px;
		}

	#content {
		width: auto;
		float: none;
		height:auto;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
		height:auto;
	}
	
	#sidebar {
		width: auto;
		float: none;
		height:auto;
	}
 .gros {
	font-size: 32px;
	font-weight:bold;
 	}	
}

/* for 540px or less */
@media screen and (max-width: 540px)
{
	header {
		height: auto;
	}
	h1 {
		font-size: 2em;
	}
	#sidebar {
		display: none;
	}
}

/************************************************************************************
BLUE TABLE METEO
*************************************************************************************/
div.blueTable {
	border: 0px solid #1C6EA4;
	text-align: center;
	border-collapse: collapse;
  }
  .divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
	border: 0px solid #AAAAAA;
	padding: 1px 3px;
  }
  .divTable.blueTable .divTableBody .divTableCell {
	font-size: 98%;
  }
  .blueTable .tableFootStyle {
	font-size: 99%;
  }
  .blueTable .tableFootStyle .links {
	   text-align: right;
  }
  .blueTable .tableFootStyle .links a{
	display: inline-block;
	background: #1C6EA4;
	color: #FFFFFF;
	padding: 2px 8px;
	border-radius: 5px;
  }
  .blueTable.outerTableFooter {
	border-top: none;
  }
  .blueTable.outerTableFooter .tableFootStyle {
	padding: 3px 5px; 
  }
  /* DivTable.com */
  .divTable{ display: table; }
  .divTableRow { display: table-row; }
  .divTableHeading { display: table-header-group;}
  .divTableCell, .divTableHead { display: table-cell;}
  .divTableHeading { display: table-header-group;}
  .divTableFoot { display: table-footer-group;}
  .divTableBody { display: table-row-group;}