/*-----------------------------------  First, the general style stuff ------------------------ */

.accessibility a {
		display: none; /*link to skip all header stuff, for text-based surfers*/
	}


body {	
		text-align: justify;
		font-family: arial, helvetica, sans-serif;
		color: black;
		background-color: #f5f5f5;
		margin: 0;
	}

a {
		color: #000080;
		text-decoration: underline;
	}

a:hover {
		color: #00c;
	}

a:active {
		color: red;
	} 

a:visited {
		color: #66c;  
	}

a img {
		border: none;
	}

.bottom_note a {
		text-decoration: none;
	}

.bottom_note a:hover {
		text-decoration: underline; 
	}

.secondary {
		color: inherit;
		text-decoration: none;
		border-bottom: 1px dotted;
	}

h1 { 
		display: none; /*it's here for accessibility*/
	}

h2 {
		color: #000080;
		margin: 0.5em 0 1.5em 0;
		font-weight: normal;
		font-size: 2em;
		text-align: center;
	}

h3 {
		color: #630000;
		font-size: 1.1em;
		font-weight: normal;
		text-align: left;
		margin: 1em 0 0.3em 0;
	}


em, strong {
		color: #630000;
		background-color: inherit;
	}
		


/*----------------------------------- language tabs on top of page ------------------------ */

/*-- uncomment this and put language tabs html to display them, just like getgnulinux.org--
.accessibility {
		height: 11px;
		background: #f7f7f9;
		border-bottom: 1px #DFD9F9 solid;
	}


#translations {
		width: 80%;
		max-width: 53em;
		min-width: 42em;
		line-height: 1em;
		margin: -11px auto 1.8em auto;
	}

#translations ul {
		padding:0;
		margin: 0;
		list-style-image: none;
		position: relative;
	}

#translations li {
		float: right;
		display: block;
		font-size: 1em;
		margin: 0 0.5em;
		height: 19px;
		width: 32px;
	}

#translations a img {
		text-decoration: none;
		background: none;
		margin: 0 auto 0 auto;
	}

*/

/*----------------------------------- Big box with shades + 4 round corners ------------------------ */


.wrap_top {	/*shades brought by 4 divs wrapping content*/
		width: 80%;
		max-width: 50em;
		min-width: 550px;
		margin: 1em auto 1em auto;
		clear: both;
		background: url(bgd_top.png) top repeat-x;
		padding-top: 15px;
	}

.wrap_right {
		background: url(bgd_right.png) right repeat-y;
		padding-right: 15px;
	}

.wrap_bottom {
		background: url(bgd_bottom.png) bottom repeat-x;
		padding-bottom: 15px;
	}

.wrap_left {
		background: url(bgd_left.png) left repeat-y;
		padding-left: 15px;
	}

.topl, .topr, .botl, .botr {	
		position: relative;	/*corners are floated*/
		height: 34px;
		width: 34px;
	}

.topl {	
		background: url(bgd_topl.png) top left no-repeat;
		float: left;
		top: -15px;
		left: -15px;
	}
	
.topr {
		background: url(bgd_topr.png) top right no-repeat;
		float: right;
		top: -15px;
		right: -15px;
	}

.botl {
		background: url(bgd_botl.png) bottom left no-repeat;
		float: left;
		bottom: 19px;
		left: -15px;
	}
	
.botr {
		background: url(bgd_botr.png) bottom right no-repeat;
		float: right;
		bottom: 19px;
		right: -15px;
	}

#mainbody {      /* everything with header, except footer*/
		border: 3px gray solid;
		background: #ffffff;
		padding: 2em;
	}



/*-----------------------------------  main contents ------------------------ */


/*---------"first slide"----------*/

#box_graphs {
		
		border-top: 3px whitesmoke solid;
		margin-top: 3em;
		padding-top: 4em;
	}

.central_image {
		text-align: left;
		width: 505px;
		margin: 0 auto 1em auto;
	}

#title { 
		font-size: 1.8em;
		clear: both;		
		margin: 2em 0 1.5em 0;
		color: black;
		text-align: center;
		padding-bottom: 3em;
		border-bottom: 3px whitesmoke solid;
	}

/*---------the meat----------*/


#maincontent img {
		float: right;
		margin: -15px 0 1em 1em;
	}

ul {
		clear: both;
		list-style-image: url(blackbullet.png);
		padding-left: 1.5em;
		padding-right: 1em;
	}

li {	
		margin: 0 0 1em 0;
		text-align: left;
		background-color: ivory;
		border: 1px solid #bbb;
		padding:1em;
		-moz-border-radius: 3px; /*not valid but nice-looking*/
	}

#conclusion {
		margin: 4em 0;
	}


/*---------FAQ & link boxes----------*/

#collapsed_box {
		font-size: 0.9em;
		margin: 3em 0 2em 0;
		padding: 0 2em 0.5em 2em;
		border: 1px #e8e8dc solid;
		background: #fffff8;
	}

#collapsed_box h2 {
		text-align: left;
		font-size: 1.5em;
		margin: 0.5em 0;
		font-weight: normal;
		text-indent: -0.5em;
		padding-left: 40px;
		background: url(plus.png) center left no-repeat;
	}

.toggleanswer {
		cursor: pointer;}

.answer {
		padding: 0.05em 0 0.05em 1em;
		border-left: 1px gray solid;
	}


#collapsed_box ul {
		padding-left: 1.5em;
		padding-right: 1em;
	}

#collapsed_box li {	
		margin: 0 0 1em 0;
		text-align: left;
		background: none;
		border: 0;
		padding: 0;
	}



.bottom_note {
		clear: both;
		text-align: center;
		font-size: 0.8em;
		border-top: 1px whitesmoke solid;
		padding-top: 1em;
	}

.bottom_note a img {
		margin-top: 5px;
		opacity: 0.3;
	}

.bottom_note a:hover img {
		opacity: 1;
	}