/*
  Déclaration des polices d'écriture.
*/

@font-face {
	font-family: "OpenSans";
	src: url('../fonts/OpenSans-Regular.ttf');
}

@font-face {
	font-family: "WaitingfortheSunrise";
	src: url('../fonts/WaitingfortheSunrise.ttf');
}


/*
  Balises générales.
*/

html {
	font-family: "OpenSans";
	color: #404040;
	font-size: .8em;
	line-height: 1.8em;
}

header {
	background: linear-gradient(rgba(240, 240, 240, 0.95), rgba(190, 190, 190, 0.95));
	box-shadow: 0 0 6px rgba(150, 150, 150, .9);
	border-bottom: 1px solid rgba(180, 180, 180, .8);
	padding: 0.5em;
}

#logo {
	float: left;
}

#site-name,
#site-slogan {
	font-family: "WaitingfortheSunrise";
	margin: .7em 1em .8em 10em;
}

#site-slogan {
	margin: 0 1em 0.5em 15em;
}


/*
  Titres.
*/

h1 {
	text-shadow: 0 0 3px #707070;
}

h2 {
	margin-top: 1.5em;
	text-shadow: 0 0 2px rgba(160, 160, 160, 1);
}

.bloc h2 {
	margin-top: 0;
	padding: .2em 1em;
	font-size: 1.1em;
	background: linear-gradient(rgba(240, 240, 240, .95), rgba(190, 190, 190, .95));
}

/*
  Liens.
*/

a, a:visited {
	color: rgb(0, 0, 200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/*
  Formulaires.
*/

/* Boutons. */

button,
input[type="button"],
input[type="submit"] {
	color: #404040;
	font-size: .9em;
	height: 2.25em;
	padding: 0 1em;
	margin: 0 .2em;
	border-radius: 3px;
	border: solid 1px rgb(200, 200, 200);
	box-shadow: 0 0 1px #ddd;
	text-shadow: 0 0 2px #ccc;
	background: linear-gradient(rgb(250, 250, 250), rgb(230, 230, 230));
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
	border: solid 1px rgb(210, 210, 210);
	background: linear-gradient(rgb(255, 255, 255), rgb(235, 235, 235));
}

button:active,
input[type="button"]:active,
input[type="submit"]:active {
	color: #303030;
	border: solid 1px rgb(190, 190, 190);
	box-shadow: 0 0 2px #ccc inset;
	background: linear-gradient(rgb(245, 245, 245), rgb(225, 225, 225));
}


/* Champs. */

input[type="password"] {
	font-size: .9em;
	height: 2.1em;
	padding: 0 .5em;
	margin: 0 .5em;
	border-radius: 3px;
	border: solid 1px rgb(200, 200, 200);
	box-shadow: 0 0 2px #ccc inset;
	text-shadow: 0 0 2px #ccc;
	background: linear-gradient(rgb(245, 245, 245), rgb(250, 250, 250));
}


/*
  Classes perso.
*/

/* Puces. */
.ovh,
.online,
.home,
.external {
	list-style: none;
	position: relative;
	left: -1.8em;
	padding-left: 1.8em;
}

.home {
	background: url('../images/home_puce.png') no-repeat 0 .3em;
}

.ovh {
	background: url('../images/ovh_puce.png') no-repeat 0 .3em;
}

.external {
	background: url('../images/externe_puce.png') no-repeat 0 .3em;
}

.online {
	background: url('../images/online_puce.png') no-repeat 0 .3em;
}

.star::before{
    content: "";
    background: url('../images/star_puce.png') no-repeat 0 .3em;
    width: 1.5em;
    height: 1.5em;
    float: left;
    margin-left: -.4em;
}

.bloc {
	border: 1px solid #ccc;
	box-shadow: 0 0 6px #ccc;
	border-radius: 0 0 5px 5px;
	background: linear-gradient(rgba(240, 240, 240, .98), rgba(255, 255, 255, .98));
}

/*
  Mise en page.
*/

#page {
	padding: 20px;
}

#content {
	padding-right: 320px;
}

#first_column {
	padding-top: 20px;
	font-size: .9em;
	float: right;
	width: 300px;
}