/*
 * Copyright © ECILIA SARL
 */

/*
 * Styles généraux
 */

* {
	font-family: Arial, Helvetica, sans-serif;
}

body {
	font-size: 75%;
	color: #273F49;
	background-color: #BAB1A9;
}

img {
	border: none;
}

h2 {
	font-size: 1.2em;
}

b, strong {
	color: #07548C;
}

/*
 * Liens
 */

a {
	text-decoration: none;
	color: #07548C;
}

a:hover, a:active {
	text-decoration: underline;
	color: #E98C22;
}

/*
 * Mise en page
 */

.clear {
	clear: both;
}

#wrap-content {
	position: relative;
	background-color: #FFF;

	border: 1px solid #656466;
	width: 66em;
	margin: 0 auto;
}

#content {
	position: relative;
	margin-top: 30px;
}

/*
 * En-tête
 */

#header {
	position: relative;
	background-color: #005693;

	height: 107px;
}

#header h1 {
	display: none;
}

img#logo {
	position: absolute;
	top: 7px;
	left: 26em;
}

#flags {
	position: absolute;
	top: 12px;
	right: 2em;
	cursor: pointer;
}

#flags ul {
	text-align: right;
	font-size: 0.8em;

	position: absolute;
	top: 34px;
	right: -18px;
	background-color: #FFF;

	padding: 10px;
	border: 1px solid #80B0D0;
	margin: 0;
}

#flags li {
	list-style-type: none;
}

#flags a {
	text-decoration: none;
	color: #808080;
}

#flags a.selected {
	color: #7EA2C4;
}

/*
 * Pied de page
 */

ul#footer {
	color: #FFF;
	text-align: center;
	background-color: #005693;

	padding: 0.5em 0;
	margin: 0;
}

#footer li {
	display: inline;
}

#footer a {
	color: #FFF;
	text-decoration: none;
}

/*
 * Bandeau clients & démo
 */

table#clients_demo_panel {
	padding-left: 1.5em;
}

#clients_demo_panel td {
	padding: 0 1em 0.5em 0;
	width: 33%;
}

#clients_demo_panel .column_1 {
	text-align: right;
}

#clients_demo_panel .column_2, #clients_demo_panel .column_3 {
	text-align: center;
}

#clients_demo_panel .column_1 span {
	padding-right: 35px;
	background: url('/images/three_arrows.png') no-repeat right center;
}

#clients_demo_panel .column_2 img {
	margin-top: 10px;
}

#clients_demo_panel .column_3 #demo_panel {
	text-align: right;
	font-size: 75%;

	float: left;
	width: 60%;
}

#clients_demo_panel .column_3 #demo_panel a {
	font-size: 150%;
	font-weight: bold;
	color: #273F49;

	display: block;
}

#clients_demo_panel .column_3 img#demo {
	float: left;
	margin-left: 1em;
}

/*
 * Menu accueil
 */

#home h2, #home h3, #home h4 {
	text-align: center;
	padding: 0;
	margin: 0;
}

#home h2 {
	font-size: 2em;
	padding: 0 0 0.3em 0;
}

#home h3 {
	font-size: 1.45em;
}

#home h4 {
	font-size: 1em;
}

#home #menu, #home #menu a {
	color: #FFF;
	text-decoration: none;
}

#home table#menu {
	margin-left: 1.5em;
}

#home #menu td {
	padding: 0.5em 1em 0.5em 0;
	width: 33%;
}

#home #menu .blue {
	background-color: #07548C;
}

#home #menu .grey {
	background-color: #9BA9AF;
}

#home #menu .orange {
	background-color: #E98C22;
}

#home #menu dl {
	height: 14em;
	margin: 0;
}

#home #menu dt {
	font-size: 1.8em;
	height: 3em;
	background: url('/images/list_block.png') no-repeat bottom left;
}

#home #menu dd {
	margin: 1em 0;
}

#home #menu dd p {
	margin: 0;
	padding: 0;
}

#home #menu .nw {
	padding: 10px;
}

/*
 * Menu article
 */

#frame #content {
	padding: 0 1em;
}

#frame .article {
	text-align: justify;

	width: 66%;
	float: right;
}

#fckeditor {
	text-align: justify;
}

#fckeditor table {
	font-size: 100%;
}

#frame .article td, #fckeditor table td {
	padding: 0.2ex;
}

#frame .article ul, #fckeditor ul {
	padding-left: 1.2em;
}

#frame .article li, #fckeditor li {
	list-style-image: url('/images/puce_orange.png');
	padding-bottom: 0.5em;
}

#frame #menu {
	width: 33%;
	float: left;
}

#frame #menu, #frame #menu a {
	color: #FFF;
	text-decoration: none;
}

#frame #menu .blue {
	background-color: #07548C;
}

#frame #menu .grey {
	background-color: #9BA9AF;
}

#frame #menu .orange {
	background-color: #E98C22;
}

#frame #menu dl {
	margin: 0;
}

#frame #menu dt {
	font-size: 1.8em;
	height: 2.5em;
	padding-bottom: 0.5em;
}

#frame #menu dt.selected {
	background: url('/images/list_block.png') no-repeat bottom left;
	height: auto;
}

#frame #menu dd {
	margin: 0;
}

#frame #menu dd ul {
	margin: 0.8em 0;
}

#frame #menu dd li {
	list-style-image: url('/images/normal_link.png');
	padding: 0.4em 0;
}

#frame #menu dd li a:hover, #frame #menu dd li a:active {
	text-decoration: underline;
}

#frame #menu .blue dd li.selected {
	list-style-image: url('/images/arrow_selected_blue.png');
}

#frame #menu .blue dd li.selected a {
	color: #E98C22;
	text-decoration: none;
}

#frame #menu .grey dd li.selected {
	list-style-image: url('/images/arrow_selected_grey.png');
}

#frame #menu .grey dd li.selected a {
	color: #07548C;
	text-decoration: none;
}

#frame #menu .orange dd li.selected {
	list-style-image: url('/images/arrow_selected_orange.png');
}

#frame #menu .orange dd li.selected a {
	color: #07548C;
	text-decoration: none;
}

/*
 * Octopus
 */

.blue .north { background: url('/images/octopus/blue/north.png') repeat-x top; }
.blue .east { background: url('/images/octopus/blue/east.png') repeat-y right; }
.blue .south { background: url('/images/octopus/blue/south.png') repeat-x bottom; }
.blue .west { background: url('/images/octopus/blue/west.png') repeat-y left; }
.blue .ne { background: url('/images/octopus/blue/ne.png') no-repeat top right; }
.blue .se { background: url('/images/octopus/blue/se.png') no-repeat bottom right; }
.blue .sw { background: url('/images/octopus/blue/sw.png') no-repeat bottom left; }
.blue .nw { background: url('/images/octopus/blue/nw.png') no-repeat top left; padding: 15px; }

.grey .north { background: url('/images/octopus/grey/north.png') repeat-x top; }
.grey .east { background: url('/images/octopus/grey/east.png') repeat-y right; }
.grey .south { background: url('/images/octopus/grey/south.png') repeat-x bottom; }
.grey .west { background: url('/images/octopus/grey/west.png') repeat-y left; }
.grey .ne { background: url('/images/octopus/grey/ne.png') no-repeat top right; }
.grey .se { background: url('/images/octopus/grey/se.png') no-repeat bottom right; }
.grey .sw { background: url('/images/octopus/grey/sw.png') no-repeat bottom left; }
.grey .nw { background: url('/images/octopus/grey/nw.png') no-repeat top left; padding: 15px; }

.orange .north { background: url('/images/octopus/orange/north.png') repeat-x top; }
.orange .east { background: url('/images/octopus/orange/east.png') repeat-y right; }
.orange .south { background: url('/images/octopus/orange/south.png') repeat-x bottom; }
.orange .west { background: url('/images/octopus/orange/west.png') repeat-y left; }
.orange .ne { background: url('/images/octopus/orange/ne.png') no-repeat top right; }
.orange .se { background: url('/images/octopus/orange/se.png') no-repeat bottom right; }
.orange .sw { background: url('/images/octopus/orange/sw.png') no-repeat bottom left; }
.orange .nw { background: url('/images/octopus/orange/nw.png') no-repeat top left; padding: 15px; }

.article .north { background: url('/images/octopus/article/north.png') repeat-x top; }
.article .east { background: url('/images/octopus/article/east.png') repeat-y right; }
.article .south { background: url('/images/octopus/article/south.png') repeat-x bottom; }
.article .west { background: url('/images/octopus/article/west.png') repeat-y left; }
.article .ne { background: url('/images/octopus/article/ne.png') no-repeat top right; }
.article .se { background: url('/images/octopus/article/se.png') no-repeat bottom right; }
.article .sw { background: url('/images/octopus/article/sw.png') no-repeat bottom left; }
.article .nw { background: url('/images/octopus/article/nw.png') no-repeat top left; padding: 10px 30px 25px 20px; }