@import "visual_consistencies.css";
@import "clearfix.css";
@import "menu.css";
body {font:100% Verdana, Arial, Helvetica, sans-serif; background: #ffffff; margin: 0; padding: 0; text-align: center; color: #000000;}

p{font-size:11px;text-decoration: none; line-height:16px; font-weight:100;}

h1{font-size: 25px; text-decoration: none; font-weight:100;}
h2{font-size: 18px; text-decoration: none; font-weight:100;}
h3{font-size: 16px; text-decoration: none; font-weight:100;}

ul{text-decoration: none; font-size:11px; }
li{line-height:140%; margin-top:5px;}

img{border:0px;}

#container {width: 800px; margin: 20px auto; text-align: left;}
.left {float:left;}
.gray {color:#999999 !important;}
.bold {font-weight:bold !important;}
.bigger {font-size:120% !important;}
.marginBtm{margin-bottom:0px !important;}

/*          */
/*   HEADER */
/*          */
#header {height: 285px; border-bottom: 1px solid #000000; background: #ffffff; padding: 0 0px 0 0px;}

body.home #header{background-image:url(../images/home.png); background-repeat:no-repeat;}
body.about #header{background-image:url(../images/about.png); background-repeat:no-repeat;}
body.sudan #header{background-image:url(../images/sudan.png); background-repeat:no-repeat;}
body.news #header{background-image:url(../images/news.png); background-repeat:no-repeat;}
body.donate #header{background-image:url(../images/donate.png); background-repeat:no-repeat;}
body.media #header{background-image:url(../images/media.png); background-repeat:no-repeat;}
body.contact #header{background-image:url(../images/contact.png); background-repeat:no-repeat;}

.topmenu img{border:0px;}


/*   MAIN  */
/* CONTENT */

#mainContent {padding: 0 20px; background: #FFFFFF;}

#mainContent a{color:#B00000;text-decoration: none;}
#mainContent a:hover{color: #000000; text-decoration: none;}

#mainContent.wide {padding:0 0 0 20px !important; background: #FFFFFF;}
#mainContent.invite {padding:0 0 0 10px !important; }
* html #mainContent.invite {padding:0px !important; margin:0px !important;}
* html #table{ margin-left:-20px !important;}

#mainContent .rightCallout {float:right; width:200px; margin-right:0px;  padding:10px 8px 10px 7px; background:#eeeeee;}
#mainContent .rightCallout h2{ background:url(../images/grayGradient.gif) repeat-x; color:#fff; font-size:12px; text-transform:uppercase; padding:5px 5px 5px 0px; text-align:center; }
.top{margin-top:-4px;}
#mainContent .rightCallout p{font-size:10px; margin-top:-10px;}
#mainContent .rightCallout img{margin:-3px 0 -6px 0;}
#mainContent .leftColumn {float:left; width:545px; margin-top:15px; padding-right:15px;}
#mainContent .leftColumn #columns{ margin:0px;}
#mainContent .leftColumn #columns .left{float:left; width:275px; margin:0px; display:inline-block;}
#mainContent .leftColumn .fltlft {width:300px !important; margin:15px; float:left}


#mainContent .leftColumn .fltlft.narrow {margin-left:0px !important; margin-bottom:48px !important; width:260px !important;}

#mainContent.invite .leftColumn {float:left; width:540px; margin-top:15px;}
.leftColumn h1{margin-top:25px;}

.box {padding:0 20px 10px 20px;}
.boxlink {font-weight:bold; float:left; margin-top:10px; width:90px; margin-bottom:15px;}

.thumbs {float:left; }

/* ****  NEWS  **** */
.date{font-size:10px; margin-top:6px; color:#a7a8ab;}
		
.headline{color:#B00000;}

#newsletter{width:620px; float:left;}

.newspan{width:350px; float:right; margin-right:20px;}


/* ****  MEDIA  **** */
#mainContent #media{width:750px; margin-top:20px}
#mainContent #media .right{width:350px; height:auto;float:right; padding:50px 0 0 0; }
#mainContent #media .left{width:350px; padding:20px 0 20px 0; float:left;}
#mainContent #media .rightE{width:350px; height:auto;float:right; padding:20px 0px 0px 10px; }
#mainContent #media .leftE{width:350px; padding:20px 10px 20px 0; float:left;}



/*              */
/*  HOME PAGE   */
/*   SPECIFIC   */

.highlight {background:#eee; border:none !important; padding:5px; }
*html #mainContent .leftColumn .fltlft.home2 {margin-left:0px !important; margin-bottom:48px !important;}
#mainContent .leftColumn .fltlft.home2 {margin-left:-20px !important; margin-bottom:48px !important;}
#mainContent .leftColumn .fltlft.home {margin-left:0px !important; margin-bottom:48px !important;}
#mainContent .leftColumn .fltlft.home3 { position:relative; left:-15px; top:0px; float:left; margin:0 0 0 0 !important;}
.home2{margin-left:-20px !important;}
* html .home2{margin-left:0px !important;}


/*          */
/*   FOOTER */
/*          */

#footer {height:60px; padding: 0 10px; background:#ffffff; border-top: 1px solid #000000;}
#footer p {margin: 0; text-align:center; padding: 10px 0;}
#footer a {font-size: 10px; color: #000000; text-decoration: none; text-align:center; margin:20px; margin-top:0px; margin-bottom:0px;}
#footer a:hover {color: #a7a8ab}


/*          */
/*  RANDOM  */
/*          */

.tagline {font-size:9px !important; color:#666666; }
.callout { color:#B00000; font-size:120%;}
.fltrt{width:270px; margin:15px; float:right}
.fltrt3{ float:right; }
		
.fltlft{width:270px; margin:15px; float:left}
		
.board{border-bottom: 1px solid #000000;}

.details{width:100px; margin:15px; float:right}
		
#mainContent .smalltxt{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #666666;}
		
.mainPage {width:750px; margin-left:80px;}
		  
.center {width:610px; }
		  
.highlight {border-top: 1px solid #B00000;border-bottom: 1px solid #B00000;}

#mainContent .email a {font-size:10px;}

body.home #mainContent ul{padding-left:20px !important; }

.caption {font-size:9px; font-style:italic;}


/*    Main    */
/* Navigation */

.topmenu {width: 800px; float:left; margin:0; height:20px;}


/*
	This is a hack that forces a block to clear the following content
	Apply the class to the element that CONTAINS the floating elements
*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.clearFloats { clear:both;}
div.clearFloats { line-height:0; font-size:0; height:0; visibility:hidden;}


#update label{font-size:11px; padding-right:10px; padding-bottom:8px;}
table h3{border-bottom:1px solid #ccc; font-size:14px;}
.invalid { border-left: 3px solid red; }