/********************************
 ******** Table of contents  ********
 *********************************
 1. html, body
 2. header
 3. content
 4. secondary content
 5. footer
 6. others
 7. menu
 8. icons for links & specials
 9. forms
 */

/* plus foncé : #E6ECFF; */
/* moins foncé : #E9E9FF; */

/* --------------------------------------------------------------------------------------------------------------------------
 *
 *   1. html, body
 *
 * -------------------------------------------------------------------------------------------------------------------------- */

html,body{
	margin:10px 10px 0px 10px;
	padding:0;
	background-color: #E9E9FF;
	text-align: center;
	}
body{
	font: 76% arial,sans-serif;
	}
#container {
	margin: auto;
	text-align: left;
	width: 80%;
	min-width: 520px;
	border: 1px solid black;
	background-color: #E6ECFF; 
	}


/* --------------------------------------------------------------------------------------------------------------------------
 *
 *   2. header
 *
 * -------------------------------------------------------------------------------------------------------------------------- */

div#header{
	height:80px;
	position:relative;
	background-color: #809FFF;
	}
div#header h1{
	height:80px;
	line-height:80px;
	margin:0;
	padding-left:30px;
	color: #00248F;
	font-size: 3em;
	font-weight: bold;
	}
div#header a{
	position:absolute;
	right:0;
	top:23px;
	}



/* --------------------------------------------------------------------------------------------------------------------------
 *
 *   3. content
 *
 * -------------------------------------------------------------------------------------------------------------------------- */

div#content{
	margin-left: 210px;
	margin-top: 10px;
	min-width: 300px;
	background-color: #E6ECFF; 
	}
div#content p{
	line-height:1.4;
	}


/* --------------------------------------------------------------------------------------------------------------------------
 *
 *   4. secondary content
 *
 * -------------------------------------------------------------------------------------------------------------------------- */

div#extra{
	background:#FF8539;
	float:left;
	clear:left;
	width:200px;
	padding: 10px 0px 10px 0px;
	}


/* --------------------------------------------------------------------------------------------------------------------------
 *
 *   5. footer
 *
 * -------------------------------------------------------------------------------------------------------------------------- */

div#footer{
	background: #333;
	color: #FFF;
	clear:both;
	width:100%;
	}
div#footer p {
	text-align: right;
	padding: 6px 10px;
	margin: 0px 0px;
	}


/* --------------------------------------------------------------------------------------------------------------------------
 *
 *   6. others
 *
 * -------------------------------------------------------------------------------------------------------------------------- */

h2 {
	font-size: 2em;
	font-weight: bold;
	margin: 20px 10px;
	color: #00248F;
	}
h3 {
	font-size: 1.6em;
	font-weight: bold;
	margin: 16px 10px;
	color: #00248F;
	}
h4 {
	font-size: 1.2em;
	font-style: italic;
	font-weight: bold;
	margin: 15px 10px 10px 10px;
	}
h5 {
	font-size: 1.1em;
	font-weight: bold;
	margin: 15px 10px 10px 10px;
	}

p{
	margin:0 10px 10px;
	}
a{
	color: #000000;
	}
a:hover {
	color: #00B;
	}
ol, ul {
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 0px 20px;
	}
li {
	padding: 0px 10px 10px 10px;
	}
.center {
	text-align: center;
	}
em {
	font-style: italic;
	}
.valid {
	border-width: 0px;
	height: 15px;
	width: 80px;
	vertical-align: middle;
	}



/* --------------------------------------------------------------------------------------------------------------------------
 *
 *   7. menu
 *
 * -------------------------------------------------------------------------------------------------------------------------- */

div#menu {
	background: #BFCFFF;
	float:left;
	padding: 0px 0px 0px 0px;
	width: 200px;
	margin: 0px;
	border-style: solid solid none solid;
	border-color: #BCD2E6;
	border-width: 1px;
	}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
#menu li {
	margin: 0;
	padding: 0;
	}
#menu li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}	
#menu li a:link, #menu li a:visited {
	color: #8BADCF;
	display: block;
	background:  url(menu.gif);
	padding: 8px 0 0 10px;
	}
#menu li a:hover {
	color: #627EB7;
	background:  url(menu.gif) 0 -32px;
	padding: 8px 0 0 10px;
	}



/* --------------------------------------------------------------------------------------------------------------------------
 *
 *   8. icons for links & specials
 *
 * -------------------------------------------------------------------------------------------------------------------------- */

a[href$=".pdf"]:after {
	content: url(images/file-pdf.gif) !important;
	padding: 0 0.2em;
	}
a[href$=".doc"]:after {
	content: url(images/file-word.gif) !important;
	padding: 0 0.2em;
	}
a[href$=".docx"]:after {
	content: url(images/file-word.gif) !important;
	padding: 0 0.2em;
	}
a[href$=".xls"]:after {
	content: url(images/file-excel.gif) !important;
	padding: 0 0.2em;
	}
a[href$=".xlsx"]:after {
	content: url(images/file-excel.gif) !important;
	padding: 0 0.2em;
	}
a[href$=".mp3"]:after {
	content: url(images/file-mp3.gif) !important;
	padding: 0 0.2em;
	}
a[href$=".zip"]:after {
	content: url(images/file-zip.gif) !important;
	padding: 0 0.2em;
	}

#content a[href^="http:"] {
	background: url(images/external.gif) right center no-repeat;
	padding-right: 14px;
	}
#content a[href^="http://www.taggiasco.ch"], #content a[href^="http://www.facebook.com/share"] {
	background: transparent;
	padding-right: 0px;
	}



/* --------------------------------------------------------------------------------------------------------------------------
 *
 *   9. forms
 *
 * -------------------------------------------------------------------------------------------------------------------------- */

label{
	float: left;
	width: 120px;
	font-weight: bold;
	}

input, textarea{
	width: 220px;
	margin-bottom: 5px;
	}

textarea{
	width: 500px;
	height: 150px;
	}

#submitbutton{
	margin-left: 120px;
	margin-top: 5px;
	width: 180px;
	}

br {
	clear: left;
	}