html, body { margin: 0px; padding: 0px; }
html {
	position: relative;
	min-height: 100%;
}
body { 
	margin-bottom: 60px;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	background-color: #F5F7FA;
}

h1, h2, h3, h4, h5, h6,
code { word-wrap: break-word; }

/* En-tête (base) */
body > header, body > nav.navbar-inverse {
	background-color: #5D9CEC;
	color: #FFFFFF;
}

/* En-tête principale */
body > header > .main-head { text-align: center; }
body > header > .main-head .logo { display: block; margin: auto; }
body > header > .main-head h1, body > header > .main-head h4 { font-weight: normal; }
body > header > .main-head h1 {
	font-size: 78px; 
	line-height: 96px;
    margin: 0px 0px 80px 0px;
}
body > header > .main-head h4 {
	font-size: 22px; 
    text-transform: uppercase; 
    margin-top: 60px;
}
body > header > .main-head > .row.access { margin-bottom: 20px; }
body > header > .main-head > .row.access > .btn { margin: 0px 20px 0px 0px; font-size: 16px; }
body > header > .main-head > .row.access > .btn:last-child { margin-right: 0px; }
body > header > .main-head > .row.access > .btn > .glyphicon { margin-right: 5px; }

/* En-tête secondaire OU barre de navigation */
body nav.navbar { 
	border: none; 
	border-radius: 0px; 
}

body > header nav.navbar-inverse {
	background-color: #4270A5;
    color: #FFFFFF;
}

body .navbar-inverse .btn-link, 
body .navbar-inverse .navbar-brand, 
body .navbar-inverse .navbar-link,
body .navbar-inverse .navbar-nav > li > a, 
body .navbar-inverse .navbar-text { color: #FFFFFF; }

body .navbar-inverse .navbar-nav > li > a:hover,
body .navbar-inverse .navbar-nav > li > a:focus { background-color: #4F85C6; }

body .navbar-inverse .navbar-nav > .active > a, 
body .navbar-inverse .navbar-nav > .active > a:focus, 
body .navbar-inverse .navbar-nav > .active > a:hover { background-color: #4270A5; }

body .navbar-inverse .navbar-nav > .active.success > a, 
body .navbar-inverse .navbar-nav > .active.success > a:focus, 
body .navbar-inverse .navbar-nav > .success > a:hover,
body .navbar-inverse .navbar-nav > .success > a:focus { background-color: #8CC152; }

body .navbar-inverse .navbar-nav > .active.warning > a, 
body .navbar-inverse .navbar-nav > .active.warning > a:focus, 
body .navbar-inverse .navbar-nav > .warning > a:hover,
body .navbar-inverse .navbar-nav > .warning > a:focus { background-color: #F6BB42; }

body .navbar-inverse .navbar-nav > .active.danger > a, 
body .navbar-inverse .navbar-nav > .active.danger > a:focus, 
body .navbar-inverse .navbar-nav > .danger > a:hover,
body .navbar-inverse .navbar-nav > .danger > a:focus { background-color: #DA4453; }

body .navbar-inverse .navbar-toggle { 
	background-color: #4F85C6; 
	border: none; 
}

body .navbar-inverse .navbar-toggle .icon-bar { background-color: #FFFFFF; }
body .navbar-inverse .navbar-toggle:hover,
body .navbar-inverse .navbar-toggle:focus { background-color: #4270A5; }
body .navbar-inverse .navbar-collapse { border-color: #4270A5; }

body > header .navbar-inverse .navbar-toggle:hover,
body > header .navbar-inverse .navbar-toggle:focus { background-color: #548FD3; }
body > header .navbar-inverse .navbar-collapse { border-color: #4270A5; }

/* Conteneur de cartes */
.conteneur-carte {
	background-image: url('../img/body_bg.png');
    background-repeat: repeat;
	min-height: 320px;
}

/* Sections */
section:nth-child(even) { background-color: #F5F7FA; }
section:nth-child(odd) { background-color: #DEDFE0; }
section > .container { padding-bottom: 20px; }
section > .container h1,
section > .container h3, section > .container h4 { text-transform: uppercase; }
section > .container h1, section > .container h2,
section > .container h4 { font-weight: normal; }
section > .container h1 { font-size: 4.4rem; }
section > .container h2 { font-size: 3.6rem; }
section > .container h3 { font-size: 2.8rem; }
section > .container h4 { text-decoration: underline; font-size: 2.0rem; }
section#demonstration > .container h2 { font-size: 20px; text-transform: none; }
section#documentation > .container > .breadcrumb { margin-top: 20px; }
section > .container h1 > code, section > .container h1 > code,
section > .container h3 > code, section > .container h4 > code { 
	text-transform: none;
	font-weight: normal;
}

section > .container h1.simple,
section > .container h2.simple,
section > .container h3.simple,
section > .container h4.simple { 
	text-decoration: none; 
	text-transform: none; 
	font-weight: normal;
}

section > .container h1.simple > small,
section > .container h2.simple > small,
section > .container h3.simple > small,
section > .container h4.simple > small { 
	color: #AAAAAA;
}

/* Personnalisation du marqueur "Bootstrap" */
.bootstrap {
	text-transform: uppercase;
	
	border-radius: 5px;
	padding: 0px 6px;
	font-weight: bold;
	background-color: #563D7C;
	color: #FFFFFF;
}

/* Personnalisation des "blockquote" de documentation */
blockquote.documentation { font-size: 14px; }
blockquote.documentation small { font-size: 100%; }

/* Personnalisation des "pre" de documentation */
pre.usage {
	border: none;
	border-left: 5px solid #558ABB;
	color: #3B3C40;
	background-image: url('../img/usage_bg.png');
	background-repeat: repeat;
	background-color: #DDE4E9;
}

/* Personnalisation des liens "non disponibles" */
a.unavailable {
	color: #DA4453;
	text-decoration: underline;
	font-style: italic;
	text-decoration-style: dotted;
	pointer-events: none;
}
a.unavailable:before, a.unavailable::before {
	content: " ";
	font-family: 'FontAwesome';
	font-style: normal;
}

/* Personnalisation des liens "en cours de rédaction" */
a.writing {
	color: #F6BB42;
	text-decoration: underline;
	font-style: italic;
	text-decoration-style: dotted;
}
a.writing:before, a.writing::before {
	content: " ";
	font-family: 'FontAwesome';
	font-style: normal;
}

/* Personnalisation des boutons "à espacer" */
.btn.btn-spaced { margin: 0px 5px; }

/* Dropdownlist personnalisée pour les langues */
.select-lang .dropdown-menu { background-color: #FFFFFF; }
.select-lang .dropdown-menu li a { color: #262626; }
.blue-input-group .input-group-addon { background-color: #3BAFDA; }
.blue-input-group .input-group-addon,
.blue-input-group .btn-default { border-color: #269ECB !important; }
.select-lang .dropdown-menu .active a, 
.select-lang .dropdown-menu .active a:focus, 
.select-lang .dropdown-menu .active a:hover, 
.select-lang .dropdown-menu li a:focus, 
.select-lang .dropdown-menu li a:hover {
	color: #262626;
	background-color: #F5F5F5;
}

/* Alerte lorsque la langue souhaitée n'est pas disponible */
.alert-lang {
	padding: 7px 0px;
}

/* Démonstrateur de code (html/css/js) */
.code-tester { margin-bottom: 10px; }
.code-tester > .tab-content > .tab-pane > pre { margin: 0px; }
.code-tester > .tab-content {
	border: 1px solid #FFFFFF;
	border-width: 0px 1px 1px 1px;
	padding: 10px;
	background-color: #FFFFFF;
}

/* Personnalisation des alertes */
.alert > .title { margin: 5px 0px; text-decoration: none; }
.alert > .progress { margin-top: 20px; }

/* Pied-de-page */
.footer {
	position: absolute;
	bottom: 0px;
	width: 100%; min-height: 60px;
	background-color: #5D9CEC;
	color: #FFFFFF;
	padding: 20px 0px;
}
.footer p { margin: 0px; }

/* Style spécifique pour les écran "petits" */
@media screen and (max-device-width : 440px)
{
	body > header > .main-head h1 { font-size: 64px; }
	body > header > .main-head h4 { font-size: 20px; }
	section > .container h1 { font-size: 3.6rem; }
	section > .container h2 { font-size: 3.0rem; }
	section > .container h3 { font-size: 2.8rem; }
	section > .container h4 { font-size: 2.0rem; }
	body > header > .main-head .nav { text-align: left; }
}

/* Style spécifique pour les écran "très petits" */
@media screen and (max-device-width : 320px)
{
	body > header > .main-head h1 { font-size: 54px; }
	section > .container h1 { font-size: 3.2rem; }
	section > .container h2 { font-size: 2.8rem; }
	section > .container h3 { font-size: 2.6rem; }
	section > .container h4 { font-size: 2.0rem; }
}