/* ----------------------------
 *  SITE INTERNET CYCLOTRON.RE
 * ----------------------------
 *  développé avec le CMS SPIP
 * ----------------------------
 * auteur  : Sétphane Calderoni
 * date    : Mai 2006
 * version : 1.0
 * ----------------------------
 * feuille de styles de mise en
 * forme du cartouche graphique
 * ----------------------------
 */


/* ------------------------------------- */
/* directives générales de mise en forme */
/* ------------------------------------- */

body
{
	background-color: #000000;
	margin-bottom: 30px;
}

body,table
{
	font-family: Verdana, sans-serif;
	font-size: 12px;
}

img
{
	border: 0;
	margin-right:15px;
}

img a
{
	border: 0;
	margin-right:55px;
}

a
{
	text-decoration: none;
}

/* --------------------------------------------- */
/* enveloppe qui détermine la largeur de la page */
/* --------------------------------------------- */

#wrapper
{
	width: 960px;
	margin: auto;
}


/* ----------------------------------- */
/* en-tête de la page : adresse + date */
/* ----------------------------------- */

#header
{
	background-image: url("../images/cyclotron-re.jpg");
	background-position: left;
	background-repeat: no-repeat;
	height: 25px;
	padding: 25px 20px 0 0;
	text-align: right;
	color: #7e8eff;
}


/* -------------------------------------- */
/* bordures latérales verticales globales */
/* -------------------------------------- */

#skin
{
	background-color: #586b80;
}

#skin-left
{
	background-image: url("../images/left-fill.jpg");
	background-position: left;
	background-repeat: repeat-y;
	/*padding-left: 37px;*/
}

#skin-right
{
	background-image: url("../images/right-fill.jpg");
	background-position: right;
	background-repeat: repeat-y;
	/*padding-right: 31px;*/
}


/* --------------------------- */
/* bordure supérieure  globale */
/* --------------------------- */

#skin-top
{
	background-image: url("../images/top-fill.jpg");
	background-position: top;
	background-repeat: repeat-x;
	height: 40px;
}

#skin-top .left
{
	float: left;
	background-image: url("../images/top-left.jpg");
	background-position: left;
	background-repeat: no-repeat;
	width: 248px;
	height: 40px;
}

#skin-top .center
{
	float: left;
	height: 16px;
	margin: 14px 0 10px 0;
}

#skin-top .right
{
	float: right;
	background-image: url("../images/top-right.jpg");
	background-position: right;
	background-repeat: no-repeat;
	width: 131px;
	height: 40px;
}

#flags
{
	margin-top: 22px;
	margin-right: 0px;
	width: 105px;
	height: 14px;
	text-align: right;
}

img.flag
{
	width: 22px;
	height: 14px;
	margin-left: 0px;
	padding: 0;
}

a img.flag {margin-right:5px;}

/* ------- */
/* contact */
/* ------- */

#contact
{
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 40px;
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 12px;
}

#contact a
{
	color: #e0e0e0;
}

#contact a:hover
{
	color: #ffffff;
}


/* ------------------- */
/* barre de navigation */
/* ------------------- */

#navigation table
{
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	text-transform: uppercase;
	border-spacing: 0;
}

#navigation .links
{
	width: 1px;
}

#navigation .links td
{
	padding-right: 20px;
	white-space: nowrap;
}

#navigation a
{
	color: #3c4b78;
}

#navigation a:hover
{
	color: #3c4b78;
	text-decoration: overline underline;
}

#navigation .selected
{
	color: #000000;
}


/* -------------------------- */
/* bordure inférieure globale */
/* -------------------------- */

#skin-bottom
{
	clear: left;
	background-image: url("../images/bottom-fill.jpg");
	background-position: bottom;
	background-repeat: repeat-x;
	height: 32px;
}

#skin-bottom .left
{
	background-image: url("../images/bottom-left.jpg");
	background-position: left;
	background-repeat: no-repeat;
	height: 32px;
}

#skin-bottom .right
{
	background-image: url("../images/bottom-right.jpg");
	background-position: right;
	background-repeat: no-repeat;
	height: 32px;
}

#skin-bottom .center
{
	background-image: url("../images/copyright.jpg");
	background-position: center 12px;
	background-repeat: no-repeat;
	height: 32px;
}


/* ----------------------- */
/* partie centrale globale */
/* ----------------------- */

#skin-middle-left
{
	background-image: url("../images/subtop-left.jpg");
	background-position: top left;
	background-repeat: no-repeat;
	padding-lefts: 20px;
	min-height: 127px;
}

#skin-middle-right
{
	background-image: url("../images/subtop-right.jpg");
	background-position: top right;
	background-repeat: no-repeat;
	padding-rights: 20px;
	min-height: 127px;
}

#content
{
	padding-top: 15px;
	margin-left: 20px;
	margin-right: 20px;
}


/* --------------------------------------------------- */
/* découpage de la partie centrale globale en colonnes */
/* --------------------------------------------------- */

#columns
{
	margin: -10px -5px 10px -5px;
}

#column-25
{
	float: left;
	width: 25%;
}

#column-34
{
	float: left;
	width: 34%;
}

#column-40
{
	float: left;
	width: 40%;
}

#column-50
{
	float: left;
	width: 50%;
}

#column-60
{
	float: left;
	width: 60%;
}

#column-66
{
	float: left;
	width: 66%;
}

#column-75
{
	float: left;
	width: 75%;
}


/* --------------- */
/* écran d'accueil */
/* --------------- */

#screen
{
	background-image: url("../images/screen-fill.jpg");
	background-repeat: repeat-x;
	height: 234px;
	padding-bottom: 10px;
}

#screen-left
{
	background-image: url("../images/screen-left.jpg");
	background-position: left;
	background-repeat: no-repeat;
	height: 234px;
	padding-left: 12px;
}

#screen-right
{
	background-image: url("../images/screen-right.jpg");
	background-position: right;
	background-repeat: no-repeat;
	height: 234px;
	padding-right: 12px;
}

#screen-image
{
	padding-top: 2px;
	text-align: center;
	height: 230px;
	overflow: hidden;
}

img.screen
{
/* est-ce bien nécessaire ?...
 * c'est la taille ** conseillée ** pour ces images :)
 *
	width: 876px;
	height: 230px;
 */
}

/* -------- */
/* panneaux */
/* -------- */

.panel
{
	margin-top: 10px;
	margin-left: 5px;
	margin-right: 5px;
	background-color: #e5f1ff;
}

.panel .left
{
	background-image: url("../images/panel-left.jpg");
	background-position: left;
	background-repeat: repeat-y;
	paddings-left: 13px;
}

.panel .right
{
	background-image: url("../images/panel-right.jpg");
	background-position: right;
	background-repeat: repeat-y;
	paddings-right: 13px;
}

.panel-top
{
	background-image: url("../images/panel-top-fill.jpg");
	background-position: top;
	background-repeat: repeat-x;
	height: 40px;
}

.panel-top .left
{
	float: left;
	background-image: url("../images/panel-top-left.jpg");
	background-position: left;
	background-repeat: no-repeat;
	width: 24px;
	height: 40px;
}

.panel-top .center
{
	float: left;
	padding: 6px 0 0 4px;
	text-transform: uppercase;
	font-family: Verdana, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #ffffff;
}

.panel-top .right
{
	float: right;
	background-image: url("../images/panel-top-right.jpg");
	background-position: right;
	background-repeat: no-repeat;
	width:62px;
	height: 40px;
}

.panel-bottom
{
	background-image: url("../images/panel-bottom-fill.jpg");
	background-position: bottom;
	background-repeat: repeat-x;
	height: 14px;
}

.panel-bottom .left
{
	float: left;
	background-image: url("../images/panel-bottom-left.jpg");
	background-position: left;
	background-repeat: no-repeat;
	width: 55px;
	height: 14px;
}

.panel-bottom .right
{
	float: right;
	background-image: url("../images/panel-bottom-right.jpg");
	background-position: right;
	background-repeat: no-repeat;
	width:55px;
	height: 14px;
}

.panel-content
{
	margin-left: 20px;
	margin-right: 20px;
}

/* Tableaux */
table.spip {
	margin: auto;
	margin-top:20px;
	margin-bottom: 1em;
	border: 1px solid;
	border-collapse: collapse; }
table.spip caption {
	caption-side: top; /* bottom pas pris en compte par IE */
	text-align: center;
	margin: auto;
	padding: 3px;
	font-weight: bold;
	 }
table.spip tr.row_first { background: #586B80; }
table.spip tr.row_odd { background: #DDD; border: 1px solid; }
table.spip tr.row_even { background: #EEE; border: 1px solid; }
table.spip th, table.spip td { padding: 5px; text-align: left; vertical-align: middle; border: 1px solid;}

a.spip-out img{ border-bottom: 1px solid red;}