pre {
    background-color: #eee;
    padding: 10px;
    font-size: 11px;
}

#spinner {
    margin-right: 10px;
}

div.uploadStatus {
    margin: 5px;
}

div.progressBar {
    margin: 5px;
}

div.progressBar div.border {
    background-color: #fff;
    border: 1px solid red;
    width: 100%;
}

div.progressBar div.background {
    background-color: #333;
    height: 18px;
    width: 0%;
}

.new_account {
    border: 1px solid #aaa;
    padding: 1em;
    background-color: #9BCE31;
    margin: 1em;
}

/* from here on it's good stuff ============================================ */
html, body {
    margin: 0px;
    padding: 0px;
    line-height: 20px;
}

body {
    padding: 0 0 50px 0;
    font-family: Arial;
    font-size: 14px;
    background: #EEEEE;
}

a:link, a:visited {
    color: #0000CC;
}

a:hover, a:focus, a:active {
    color: #FF3333;
}

body a img {
    border: 0;
}

root {
    display: block;
    padding-left: 0;
    margin-left: 0;
}

/* general layout ========================================================= */
.page {
    width: 850px;
    padding: 0px 0px;
    margin: 0 auto 0 auto;
    border: 1px solid #ccc;
    border-top: 0;
}

/* header */
#header {
    background: #000 url(../images/bg_header.gif) repeat-x left bottom;
    color: #fff;
    position: relative;
    height: 80px;
    margin: 0px -1px;
}

#header h1 {
    margin: 0px;
    padding: 0px;
    width: 248px;
    height: 42px;
    border: 0px solid white;
    position: absolute;
    top: 10px;
    left: 15px;
}

#header h1 a {
    display: block;
    height: 100%;
    width: 100%;
    background: url(../images/logo.png) no-repeat left top;
}

#header h1 a:hover {
    background: url(../images/logo.png) no-repeat left bottom;
}

#header h1 a span {
    display: none;
}

#header img#africa {
    position: absolute;
    top: 8px;
    left: 260px;
}

/* horizontal menu */
#header #stuff {
    position: absolute;
    top: 5px;
    right: 10px;
}

#header #stuff a {
    color: white;
}

#addthis {
    position: absolute;
    right: 10px;
    bottom: 25px;
}
/* contents */
#content {
    position: relative;
    background-color: white;
    padding: 10px;
}

#content #logged {
    position: absolute;
    top: 0px;
    right: 10px;
    padding: 0px 10px 7px 10px;
    font-size: 14px;
    background: #99CCFF;
}

h2 {
    font-size: 24px;
    color: #CC0000;
    margin: 0px 0px 15px 0px;
    padding: 0px;
    clear: left;
}

/* navigation administration area ===================================== */
ul.nav1 {
    list-style-type: none;
    background: #fff;
    border-bottom: 1px solid #000;
    margin: 20px -10px 25px -10px;
    padding: 0px;
    float: left;
    border: 0px solid red;
    width: 850px;
    border-bottom: 1px solid #666;
}

ul.nav1 li {
    width: 95px;
    float: left;
    margin-left: 10px;
    position: relative;
    bottom: 0px;
}

ul.nav1 a {
    border: 1px solid #000;
    border-bottom: 0;
    background: #99CCFF;
    text-decoration: none;
    color: #333;
    display: block;
    padding: 4px 6px;
    text-align: center;
}

ul.nav1 a:hover {
    background: #CEE7FF;
}
/* forms =============================================================== */
form {
    margin: 0;
    padding: 0;
}

#content img.child-image {
    position: absolute;
    top: 55px;
    right: 20px;
    border: 1px solid #999;
    padding: 2px;
}

div.forms {
    border: 1px solid #ccc;
    padding: 10px;
    background-color: white;
}

div.forms fieldset {
    border: 1px solid #999;
    padding: 0px 10px 20px 10px;
    background-color: #fff;
	margin-bottom: 10px
}

div.forms fieldset legend {
    border: 0px solid red;
    padding: 3px 3px 5px 3px;
	margin: 0px 0px 0px 0px;
	font-weight: bold;
	color: #c00;	
}

div.forms p {
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
	width:500px;
}

div.forms p label {
    float: left;
    width: 150px;
	
	font-weight: bold;
	
}

div.forms p input {
    border: 2px solid #999;
    padding: 2px;
    background: #ffff99;
    width: 200px;
}

div.forms p select {
    border: 2px solid #999;
    padding: 2px;
    background: #ffff99;
    width: 208px;
}

div.forms p textarea {
    border: 2px solid #999;
    padding: 2px;
    background: #ffff99;
    width: 320px;
    height: 190px;
}

div.forms p.forgotten {
    padding-left: 150px;
}

div.forms p input.submit {
    border: 1px solid #666;
    padding: 2px;
    background: #ccc;
    width: auto;
    color: #666;
    cursor: pointer;
}
/* paricular inputs here and there and terms/conditions */
#user_may_contact {
	width: 20px;
	border: 0;
	background: none;
	margin-right: 5px
}

#t_and_c h2 {
	font-size: 14px;
	margin-top: 10px;
}

#t_and_c ul {
	list-style: square;
	margin: 0px;
	padding: 0px 0px 0px 20px;
}
	
#t_and_c ul li {
	margin-bottom: 5px;
}

/* views =================*/
div.views {
    border: 1px solid #ccc;
    padding: 10px;
    background-color: white;
}

div.views p b {
    display: block;
    float: left;
    width: 200px;
}
/* messaggi errori nei form */
.fieldWithErrors input {
    border-color: red;
}

#errorExplanation {
    width: auto;
    border: 2px solid #c00;
    padding: 7px;
    padding-bottom: 12px;
    margin-bottom: 20px;
    background-color: #fff;
}

#errorExplanation h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 5px 5px 5px;
    font-size: 12px;
    margin: -7px;
    margin-bottom: 10px;
    background-color: #c00;
    color: #fff;
}

#errorExplanation p {
}

#errorExplanation ul {
    margin: 0;
    padding: 0;
    margin-left: 20px
}

#errorExplanation ul li {
    font-size: 12px;
    list-style: square;
    margin-bottom: 2px;
}
/* messaggi errore nei form - easy version */
__p#flash_notice {
    border: 2px solid red;
    padding: 5px 10px;
    color: red;
    font-weight: bold;
}

/* homepage AREA ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
#sponsorMessage {
    padding: 10px;
    background-color: #fff;
    position: relative;
    height: 640px
}

/**
#sponsorMessage div {
    border: 0px solid red !important;
}
*/

.speech-left {
    width: 370px;
    height: 200px;
    border: 0px solid red;
    position: absolute;
    top: 0px;
    left: 20px;
    background: url(../images/bubbleLeft.png) no-repeat right top;
}

.speech-left img {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.speech-left div {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 220px;
    border: 0px solid red
}

div.intro {
    margin: 0px 0px 20px 0px;
    width: 650px;
}

div.intro1 {
    width: 370px;
    height: 400px;
/*
    border: 1px solid black;
*/
    position: absolute;
    top: 250px;
    right: 20px;
	padding-left: 15px;
	/*
	background: #99CCFF none repeat scroll 0 0;
	*/
}

div.intro1 h3 {
    padding: 0px;
    border: 0px solid red;
    width: 350px;
    height: 70px;
    background: url(../images/intro.png) no-repeat center top;
}

div.intro1 h3 span {
    display: none;
}

div.intro1 p {
	font-size: 12px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 5px;
}

div.intro1 p img {
    vertical-align: middle;
    margin-right: 5px;
}

div.facts{
	margin: 15px 0px 0px 0px;
}

div.facts ul {
	
	list-style: none;
    padding: 0px;
    margin: 6px 0px 0px;
	
}

div.facts ul li{
	
	font-size: 12px;
	padding: 0px;
    padding-left: 28px;
    margin: 0px;
    margin-bottom: 4px;
    background: url(../images/arrow.gif) no-repeat 12px 3px;
}


div.articles{
	background: #99CCFF none repeat scroll 0 0;
	font-size: 12px;
	position:absolute;
	width: 400px;
	border: 1px solid black;
	top: 250px;
	height: 400px;
	overflow: hidden;
}

.article{
	/*width:180px;*/
	float: left;
	margin:5px 0 0 5px;
	
}

.articles h2{
	padding: 10px 0 0 10px;
}

/*
.facts {
    width: 390px;
    height: 210px;
    border: 0px solid red;
    position: absolute;
    top: 300px;
	# bottom: 10px;
    left: 20px;
}


facts ul {
    list-style: none;
    padding: 0px;
    margin: 6px 0px 0px;
}

.facts ul li {
    padding: 0px;
    padding-left: 28px;
    margin: 0px;
    margin-bottom: 4px;
    background: url(../images/arrow.gif) no-repeat 12px 3px;
}
*/


.speech-right {
	top: 0px;
    width: 370px;
    height: 200px;
    border: 0px solid red;
    position: absolute;
    bottom: 10px;
    right: 20px;
    background: url(../images/bubbleRight.png) no-repeat left top;
}

.speech-right img {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.speech-right div {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 220px;
    border: 0px solid red
}

.meetThemButton {
    position: absolute;
	left:245px;
	position:absolute;
	top:165px;
}

/* dashboard AREA ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.dashboard-left {
    width: 13em;
    border: 1px solid red;
}

.dashboard-right {
    margin-left: 15em;
    border: 1px solid red;
}

/* list of children AREA ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
table#listChildren {
    width: 100%;
}

table#listChildren td {
    padding: 15px;
    vertical-align: top;
}

table#listChildren tr.list-line-odd td {
    background: #CEE7FF;
}

table#listChildren tr.list-line-even td {
    background: #9BCE31;
    background: #fff;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

table#listChildren td.imgChild {
    width: 70px;
    padding-right: 0px;
}

.list-line-odd td.tdBubble, .list-line-even td.tdBubble {
    vertical-align: top;
}

td div.bubble {
    background: url(../images/bubbleBottom.png) no-repeat right bottom;
    width: 370px;
    padding: 0px 0px 33px 0px;
    border: 0px solid blue
}

td div.bubble div {
    padding: 25px 30px 0px 70px;
    min-height: 70px;
    font-family: Georgia;
    border: 0px solid red
}

.list-line-odd td.tdBubble div.bubble div {
    background: url(../images/bubbleTop_green.png) no-repeat left top;
}

.list-line-even td.tdBubble div.bubble div {
    background: url(../images/bubbleTop.png) no-repeat left top;
}

table#listChildren td.tdButton {
    width: 160px;
    border: 0px solid red;
    text-align: right;
}

table#listChildren td.tdButton span.buttons a img {
    padding: 0px;
    border: 0px solid red;
}

/* sponsor me AREA ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
div#sponsorButton {
    position: absolute;
    top: 180px;
    left: 150px;
}

/* admin area ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

#searchResult{
}

#searchResult tr.list-line-odd td {
    background: #CEE7FF;
}

table#dataTable {
    width: 100%;
    border-collapse: collapse;
}

table#dataTable td {
    border: 0px;
    padding: 15px;
    vertical-align: top;
}

table#dataTable th {
	text-align: left;
	padding: 15px;
}

#searchResult tr.tableHeader {
    background: #000;
    color: #fff;
}

#searchResult tr.list-line-even td {
    background: #9BCE31;
    background: #fff;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

#searchBox {
    border: 1px solid #ccc;
    padding: 15px;
    margin: 10px 0px 10px 0px;
    width: 500px;
}

.helpText {
    font-size: 0.75em;
    font-weight: 300;
    margin: 5px;
}

/* copyright, logos and footer ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
#footer {
    width: 832px;
    margin: 10px auto 0 auto;
    border-top: 0;
    text-align: right;
    padding: 8px 10px;
    background: #000;
    color: #fff;
    position: relative;
}

#footer span#valid {
    position: absolute;
    left: 10px;
    top: 9px;
    text-align: left;
}

#footer span#valid a img {
    border: 1px solid #fff;
}

#logos {
    width: 852px;
    margin: 10px auto 0 auto;
    text-align: right;
    background: #eee;
}

#logos img {
    vertical-align: middle;
}